无法合并Reducers()

Question

我在单独的文件夹中有两个reducer,用于与此类似的结构中的单独组件:

index.js
       /componentOne
           |_ componentOne.js
           |_ componentOneActionCreator.js
           |_ componentOneReducer.js
       /componentTwo
           |_ componentTwo.js
           |_ componentTwoActionCreator.js
           |_ componentTwoReducer.js

这些Reducers中的每一个都在应用程序中单独工作 - 当我createStore进入index.js(他们import进入)时 - 但如果我尝试使用它们combineReducers(),它们的功能都不起作用(但不会打破UI).我认为这与州有关 - 更多代码供以下参考:

index.js

const rootReducer = combineReducers({
  componentOneReducer,
  componentTwoReducer
});

let store = createStore(rootReducer, applyMiddleware(thunk))

componentOneReducer

export default(state = {}, payload) => {

  let newState = JSON.parse(JSON.stringify(state));

  switch (payload.type) {
    case 'REQUEST_DATA':
        newState.isLoading = true;
        return newState;
    case 'RECEIVE_DATA':
        newState.isLoading = false;
        newState.pageData = payload.payload;
        newState.pageName = payload.payload.pageName;

        return newState
    default: 
        return state;
  }
}

componentTwoReducer.js非常相似,但与componentOneReducer.js不完全相同.

componentOne.js

    return (
    <Layout>
    <section>
        <SectionHeader headerText={this.props.pageName}></SectionHeader> 

 ....

function mapStateToProps(state, props) {
  return {
    pageName: state.pageName
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      getData: function() {
      dispatch(getData());
     }
   }
  }
}

export default connect(mapStateToProps, mapDispatchToProps) (componentOne);

我在这里缺少什么想法？

Answer 1

我怀疑你的问题是没有使用状态树键.通过在示例中使用combineReducers,生成的状态树将由reducer命名.由于对象速记{ componentOneReducer }变为{ componentOneReducer: componentOneReducer },而您可以明确地将其更改为例如{ reducerOne: componentOneReducer }

因此你的州变成了这样的:

{
  componentOneReducer: {loading: false, pageData: 123},
  componentTwoReducer: {loading: true, pageData: null}
}

将状态映射到道具时,您应该使用例如

const mapStateToProps = state => ({
  loading: state.componentOneReducer.loading
  pageData: state.componentOneReducer.pageData
})

并this.props.loading在组件中做.

我还建议你JSON.parse(JSON.stringify(state))直接使用和直接做一些不可变的东西.

export default(state = {}, payload) => {
switch (payload.type) {
  case 'REQUEST_DATA': {
    return {
      ...state,
      isLoading: true;
    };
  }
  case 'RECEIVE_DATA': {
    return {
      ...state,
      isLoading: false,
      pageData: payload.payload,
      pageName: payload.payload.pageName
    }
  }
  default: 
    return state;
}
}