action/dispatch not updating store - reactjs

Question

I'm a bit confused because this method of updating my store has worked for me in the past - Though the setup is a little different.
In its simplest form, my action gets called, but my dispatch seems to be getting neglected
(reduxMulti and thunk middleware are applied to my store which enables async and multiple actions to be dispatched. )
export function modalDocDeleteAction() {
// This logs as expected
console.log("MODAL/ACTIONS.JS // Document Delete Action Fired");
return dispatch => {
// We don't make it here :(
console.log("MODAL/ACTIONS.JS // Document Delete Action Fired In Return");
dispatch([{ type: MODAL_DOC_DELETE }, modalOpenAction()]);
};
}
Some random JS file:
I can successfully fire my action if I dispatch as below, so I don't think it's anything to do with my setup:
import { modalDocDeleteAction } from "../presentation/modal/actions";
import store from "../container/store";
export function someFunction() {
store.dispatch(modalDocDeleteAction());
});
From component: (I've left comments in as I think I may need to use mapStateToProps in the future)
When I try to dispatch from a component is where I seem to be having issues. I'm confused as this method has worked for me previously... But this is the first time I've tried to update my store to modify a component within another component (Hopefully that makes sense)
Imports:
import { connect } from "react-redux";
import { modalDocDeleteAction } from "./modal/actions"; // This is the correct location
Component:
const ProdRow = ({ document, index, edit, view, promoteRevert, remove }) => {
// I've removed a bunch of unnecessary stuff out of here.
return (
<TableRow>
<TableCell colSpan="2">
<ActionsIcon
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
onClick={modalDocDeleteAction} // This fires my console log (above), but never makes it to the actual dispatch
>
<path
id="cross"
d="M21,6.611,19.389,5,13,11.389,6.611,5,5,6.611,11.389,13,5,19.389,6.611,21,13,14.611,19.389,21,21,19.389,14.611,13Z"
transform="translate(-5 -5)"
fill="#3c3c3c"
/>
<title>Delete</title>
</ActionsIcon>
)}
</TableCell>
</TableRow>
);
};
Redux / Export:
// const mapStateToProps = state => ({
// modalTitle: state.modalReducer.modalTitle,
// modalText: state.modalReducer.modalText,
// closeText: state.modalReducer.closeText,
// continueText: state.modalReducer.continueText,
// completeAction: state.modalReducer.completeAction,
// visible: state.modalReducer.visible
// });
const mapDispatchToProps = dispatch => ({
modalDocDeleteAction: () => dispatch(modalDocDeleteAction())
});
export default connect(
// mapStateToProps,
null,
mapDispatchToProps
)(Results);
This is the exact setup I use to modify my modal component within itself - I think because I'm trying to update the store "externally" is where the problems are coming from. Any help would be great as I'm very stuck! Thanks!
Redux bits:
ACTIONS.js Removed excess code
import {
MODAL_OPEN,
MODAL_CLOSE,
MODAL_COMPLETE_USER_ACTION,
MODAL_DOC_DELETE,
MODAL_DOC_PUBLISH,
MODAL_DOC_REVERT,
MODAL_DOC_CREATE_EXIT,
MODAL_DOC_EDIT_EXIT
} from "./actionTypes";
import store from "../../container/store";
export function modalOpenAction() {
console.log("MODAL/ACTIONS.JS // Modal Open Action Fired");
return dispatch => {
dispatch({ type: MODAL_OPEN });
};
}
export function modalDocDeleteAction() {
console.log("MODAL/ACTIONS.JS // Document Delete Action Fired");
console.log(store.getState());
return dispatch => {
console.log(
"MODAL/ACTIONS.JS // Document Delete Action Fired In Return"
);
dispatch([{ type: MODAL_DOC_DELETE }, modalOpenAction()]);
};
}
REDUCER.js Removed excess code
const initialState = {
modalTitle: "Placeholder Title",
modalText: "Placeholder Text",
closeText: "Placeholder Close",
continueText: "Placeholder Continue",
visible: false,
completeAction: false
};
function modalReducer(state = initialState, action) {
switch (action.type) {
case "MODAL_OPEN":
return {
...state,
visible: true,
completeAction: false
};
case "MODAL_DOC_DELETE":
return {
...state,
modalTitle: "Delete Document?",
modalText:
"Deleting a document will permanently remove it from S3",
closeText: "No, Keep Document",
continueText: "Yes, Delete Document"
};
STORE.js
import { createStore, combineReducers, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reduxMulti from "redux-multi";
import notificationReducer from "../presentation/notification/reducer";
import modalReducer from "../presentation/modal/reducer";
const reducers = combineReducers({
notificationReducer,
modalReducer
});
const store = createStore(reducers, applyMiddleware(thunk, reduxMulti));
console.log("STORE.JS // Default State:");
console.log(store.getState());
export default store;
Working example:
Following the exact same process as above in my Modal component works as expected:
Imports:
import { connect } from "react-redux";
import Button from "../../form/button";
import { modalCloseAction, modalCompleteUserAction } from "./actions";
Component (Styled Components):
function Component({ ...props }) {
const {
modalTitle,
modalText,
closeText,
continueText,
visible,
modalCloseAction,
modalCompleteUserAction
} = props;
console.log("MODAL.JSX // Modal State:");
console.log(props);
return (
<div>
<ModalContainer visible={visible}>
<Overlay visible={visible} />
<Modal visible={visible}>
<ModalTitle>{modalTitle}</ModalTitle>
<ModalText>{modalText}</ModalText>
<ModalButtons>
<ModalButton
buttonStyle="Back"
onClick={modalCloseAction}
>
{closeText}
</ModalButton>
<ModalButton
buttonStyle="Primary"
onClick={modalCompleteUserAction}
>
{continueText}
</ModalButton>
</ModalButtons>
</Modal>
</ModalContainer>
</div>
);
}
Redux/Export
const mapStateToProps = state => ({
modalTitle: state.modalReducer.modalTitle,
modalText: state.modalReducer.modalText,
closeText: state.modalReducer.closeText,
continueText: state.modalReducer.continueText,
completeAction: state.modalReducer.completeAction,
visible: state.modalReducer.visible
});
const mapDispatchToProps = dispatch => ({
modalCloseAction: () => dispatch(modalCloseAction()),
modalCompleteUserAction: () => dispatch(modalCompleteUserAction())
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(Component);
Dispatch Actions:
export function modalCloseAction() {
return dispatch => {
dispatch({ type: MODAL_CLOSE });
};
}
export function modalCompleteUserAction() {
return dispatch => {
dispatch([{ type: MODAL_COMPLETE_USER_ACTION }, modalCloseAction()]);
};
}