我有点困惑，因为过去这种更新商店的方法对我有用-尽管设置有些不同。
以最简单的形式，我的动作被调用，但是我的调度似乎被忽略了
（{reduxMulti和thunk中间件已应用到我的商店，该中间件使您可以分派异步操作和多个操作。）
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()]);
};
}
一些随机JS文件：
如果我按以下方式调度，我可以成功触发动作，所以我认为这与我的设置无关：
import { modalDocDeleteAction } from "../presentation/modal/actions";
import store from "../container/store";
export function someFunction() {
store.dispatch(modalDocDeleteAction());
});
来自组件： （我留下了评论，因为我认为将来可能需要使用mapStateToProps）
当我尝试从某个组件进行分派时，我似乎遇到了问题。我很困惑，因为该方法以前对我有用。但是这是我第一次尝试更新自己的商店以修改另一个组件中的一个组件（希望如此）
导入：
import { connect } from "react-redux";
import { modalDocDeleteAction } from "./modal/actions"; // This is the correct location
组件：
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 /导出：
// 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);
这是我用来修改自己的模式组件的确切设置-我认为是因为我试图“外部”更新商店，这才是问题所在。任何帮助都将非常有用，因为我经常被卡住！谢谢！
ACTIONS.js 删除了多余的代码
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 删除了多余的代码
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;
在我的Modal组件中遵循与上面完全相同的过程，按预期工作：
进口：
import { connect } from "react-redux";
import Button from "../../form/button";
import { modalCloseAction, modalCompleteUserAction } from "./actions";
组件（样式化的组件）：
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>
);
}
还原/导出
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);
发送操作：
export function modalCloseAction() {
return dispatch => {
dispatch({ type: MODAL_CLOSE });
};
}
export function modalCompleteUserAction() {
return dispatch => {
dispatch([{ type: MODAL_COMPLETE_USER_ACTION }, modalCloseAction()]);
};
}