无法从 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 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;

为了让你的连接组件使用新的 props 正确更新，Redux 需要知道你正在返回一个全新的状态。 如果您进行状态突变，您实际上是在更新引用中的相同对象，以及未注册为合法状态更新的 Redux。

此外，看起来您从未为减速器返回默认状态。 如果没有返回任何状态，那么当您尝试在mapStateToProps()访问它时，您的 reducer 只会返回 undefined。

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