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

Question

我有一个使用 Redux 管理其商店的 ReactJs 应用程序。我的状态是一个复杂的 json，它的文件可以改变。当我启动减速器时，我必须在从服务器获取内容之前访问它时指定初始状态，我得到“未定义”错误。下面是例子，

//Test.jsx
class Test extends React.Component{
    componentWillMount(){
       fetchContent({
         type: SET_CONTENT
       });
    }
    render(){ 
      return(
       <div> {this.props.header} </div>
      )
    }
    mapStateToProps(state){
       return{
         header: state.reducer1.a.b.c
       }
    }
}
export default (mapStateToProps)(Test);


//reducer1.js
export default function reducer1(state = {}, action = {}) {
  switch (action.type) {
    case SET_CONTENT:
      return Object.assign({}, action.data);
    default:
      return state;
  }
}
  
//reducer2.js
export default function reducer2(state = {}, action = {}) {
  switch (action.type) {
    case SET_SOMETHING_ELSE:
      return Object.assign({}, action.data);
    default:
      return state;
  }
}
  
//CombinedReducer.js
export default combinedReducers(Object.assign({}, {reducer1}, {reducer2}))

现在，当组件第一次初始化时，state.reducer1.a.b.c 会抛出 undefined，因为此时似乎没有调用 fetchContent()。

所以我的问题是如何解决这个问题？在 reducer 中指定初始状态是唯一的选择吗？像下面这样，

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

Answer 1

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

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

另外我假设你的意思是在类定义之外有 mapStateToProps，因为它是你传递给 connect 的函数，而不是特定于组件：

class C {
  ...
}

function mapStateToProps (state) {}

connect(mapStateToProps)(C)

最后，您是否在fetchContent 通话中错过了调度？这是使用 redux-thunk 吗？

Answer 2

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

在 reducer 中只存储 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;
  }
}

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

• mapStateToProps 函数应该在类之外定义
• 不应直接调用fetchContent 函数，而应将其结果传递给调度。

// Test.jsx

class Test extends React.Component{
  componentWillMount(){
     dispatch(fetchContent({
       type: SET_CONTENT
     }));
  }

  render() { 
    const { header } = this.props;
    return header ? (
      <div>{header}</div>
    ) : (
      <div>Loading...</div>
    );
  }
}

function mapStateToProps(state) {
  return {
    header: state.reducer1.c
  }
}

export default (mapStateToProps)(Test);