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

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,
    }
}

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

Answer 1

在你的 reducer 中，你正在 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() 中访问它时，您的 reducer 只会返回 undefined。

查看工作沙箱：https://codesandbox.io/s/async-snowflake-tnv0e