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

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

我是编程新手，我对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'));

这很有效！！！我有一个输入字段的onChange，存储控制台中的中间件记录这些更改。在我尝试使用MapStateTops之前，一切都很好。这给了我未定义的状态。我试着用这个来访问它

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

---

它给出错误“无法读取未定义的属性productName”，并且状态的控制台日志未定义。请告诉我为什么这不起作用。我几乎有另一个项目相同的设置，它是工作。它是否可以连接到React路由器，因为我没有在其他项目中使用它？将操作分派到商店可以工作并更改状态，但我无法访问它。抱歉，如果这篇文章信息量不大，我仍然不习惯发帖提问。

在你的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

---

请参阅working sandbox:

尝试删除

存储。订阅
部分。我非常确定我这样做的方式会生成一个全新的状态对象，因此不会改变旧状态，但即使您正确地将默认状态添加到reducer中，也无法解决问题。即使该状态是否发生了变异，我认为它应该是可访问的，而事实并非如此，因此您的回答没有多大帮助，但仍然感谢您抽出时间。@T.Jefferds查看此沙箱。似乎有效：如果有什么东西丢失，请告诉我。
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;