Question

我可以从组件中更改存储和状态，但是无法访问它。

我是编程新手，但我对React + Redux有问题。我的应用程序有几页与react-router连接，我使用Redux来保存表单字段中的输入。

const insuranceReducer = (state = {
    productName: ""
}, action) => {
    switch(action.type) {
        case "UPDATE_FORM":
            if(action.payload.productName){
                state = {
                    ...state,
                    productName: action.payload.productName
                }
            } 
        return state;
    } }

使用

创建商店

const store = createStore(insuranceReducer, applyMiddleware(myLogger));

store.subscribe(() => {
    console.log("store updated", store.getState());
})

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root'));

我可以使用此代码通过组件的分派来更改它

const mapDispatchToProps = (dispatch) => {
    return {
        handleChange: (event) => {
            dispatch({
                type:"UPDATE_FORM",
                payload: {[event.target.name]: event.target.value}
            })
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(FormComp);

这有效！！！我有一个onChange输入字段，并且存储控制台中的中间件记录了更改。在我尝试使用mapStateToProps之前，一切都很好。这给了我不确定的状态。我尝试通过

访问它

const mapStateToProps = state => {
    console.log(state);
    return {        
        name: state.productName,
    }
}

给出错误“无法读取未定义的属性productName”，并且状态的控制台日志未定义。请给我一些想法，为什么这不起作用。我对另一个项目几乎具有相同的设置，并且正在工作。是否可以将其连接到React Router，因为我不在其他项目中使用它？向商店分派操作有效并更改了状态，但我无法访问它。抱歉，如果帖子内容不是很丰富，我仍然不习惯发布问题。

Answer 1

在化简器中，您正在if块中进行状态突变。您要避免直接更新现有的状态对象。这违反了Redux原则。相反，您应该像这样创建一个全新的状态。

const initialState = { productName: "" };

const insuranceReducer = (state = initialState, action) => {
  switch (action.type) {
    case "UPDATE_FORM":
      if (action.payload.productName) {
        return {
          ...state,
          productName: action.payload.productName
        };
      }
      return { ...state };
    default:
      return state;
  }
};

export default insuranceReducer;

为了使您的连接组件能够使用新的道具正确更新，Redux需要知道您正在返回一个全新的状态。如果您进行状态更改，则实际上是在引用中更新同一对象，并更新为未注册为合法状态更新的Redux。

此外，您似乎从未为减速器返回默认状态。如果未返回任何状态，那么当您尝试在mapStateToProps()中访问它时，化简器将只返回未定义状态。

查看有效的沙箱：https://codesandbox.io/s/async-snowflake-tnv0e

无法从mapStateToProps获取状态（未定义）

1 个答案: