Javascript redux连接的react应用程序中未定义初始状态

我有一个ReactJs应用程序，它使用Redux来管理它的商店。我的状态是一个复杂的json，其文件可以更改。当我启动reducer时，我必须指定初始状态，否则在从服务器获取内容之前访问它时，会出现“undefined”错误。以下为例,

//Test.jsx
类测试扩展了React.Component{
组件willmount（）{
获取内容({
类型：设置内容
});
}
render（）{
返回(
{this.props.header}
)
}
mapStateToProps（州）{
返回{
标题：state.reducer1.a.b.c
}
}
}
导出默认值（MapStateTops）（测试）；
//reducer1.js
导出默认函数reducer1（状态={}，操作={}）{
开关（动作类型）{
案例集内容：
返回Object.assign（{}，action.data）；
违约：
返回状态；
}
}
//reducer2.js
导出默认函数reducer2（状态={}，操作={}）{
开关（动作类型）{
案例集\u某物\u其他：
返回Object.assign（{}，action.data）；
违约：
返回状态；
}
}
//CombinedReducer.js
导出默认的组合reducer（Object.assign（{}，{reducer1}，{reducer2}））

您可以这样做，但也可以只更新mapState函数来检查是否存在第一个键

function mapStateToProps(state){
   return{
     header: state.reducer1.a ? state.reducer1.a.b.c : <div>Loading..</div>
   }
}

---

最后，您的

fetchContent

呼叫中是否缺少调度？这是使用redux thunk吗？

在大多数情况下，您不应该将所有响应数据存储在还原器中。您的状态层次结构不应该重复JSON响应的层次结构

在减速机中只存储

c

变量会更简单：

//reducer1.js

export default function reducer1(state = { c: undefined }, action) {
  switch (action.type) {
    case SET_CONTENT:
      return Object.assign({}, state, { c: action.data.a.b.c });
    default:
      return state;
  }
}

此外，您的代码中还有一些错误：

• MapStateTops

  函数应在类外定义
• 您应该将其结果传递给dispatch，而不是直接调用

  fetchContent

  函数

//Test.jsx
类测试扩展了React.Component{
组件willmount（）{
发送（获取）内容({
类型：设置内容
}));
}
render（）{
const{header}=this.props；
返回页眉(
{header}
) : (
加载。。。
);
}
}
函数MapStateTops（状态）{
返回{
标题：state.reducer1.c
}
}
导出默认值（MapStateTops）（测试）；

因此，如果像我一样初始化状态，或者对来自该状态的每个级别的数据访问执行空检查，那么唯一可能的解决方案就是！是的，函数应该在外部。因为我写得很快，所以没有仔细研究。是的，fetchContent是我的action creator上的一个函数，它在内部调用dispatch。我不确定你对为你做空检查的期望是什么？您实际上只有两种状态可以检查a）predata和b）with data。这只是一个空检查，不是在“每个数据访问级别”上，这是否意味着redux存储必须只存储一个简单的json？即使来自服务器的响应是复杂的、嵌套很深的json，我也应该在将它们存储到redux store之前将它们转换为简单的1级json？另外，关于代码错误，这是一个键入错误：）我的意思是让MapStateTops在类定义之外，而我的fetchContent是我的一个action creator中的一个函数，它在内部使用dispatch:）@user3807940，这取决于情况。如果您从服务器中获得了嵌套的JSON，请考虑使用<代码> AudioZrime/Cuth>包。它用于将深度嵌套的json转换为一级数据。啊，很酷，以前听说过normalizer，但从未尝试过。那我就喊一声！感谢您的回复：）您可以在我的项目中看到它的实际使用情况-

//reducer1.js

export default function reducer1(state = { c: undefined }, action) {
  switch (action.type) {
    case SET_CONTENT:
      return Object.assign({}, state, { c: action.data.a.b.c });
    default:
      return state;
  }
}