Reactjs 嵌套的 redux 减速器

发布于04月22日

是否可以组合嵌套在以下 struct 中的异径管:

import 'user' from ...
import 'organisation' from ...
import 'auth' from ...
// ...

export default combineReducers({
  auth: {
    combineReducers({
        user,
        organisation,  
    }),
    auth,
  },
  posts,
  pages,
  widgets,
  // .. more state here
});

如果该州具有以下 struct :

{
    auth: {
        user: {
            firstName: 'Foo',
            lastName: 'bar',
        }
        organisation: {
            name: 'Foo Bar Co.'
            phone: '1800-123-123',
        },
        token: 123123123,
        cypher: '256',
        someKey: 123,
    }
}

如果auth减速器具有以下 struct :

{
    token: 123123123,
    cypher: '256',
    someKey: 123,   
}

那么，也许spread操作符很方便？...auth不确定:-(

推荐答案

它是完美的结合你的嵌套减速器使用combineReducers.但还有另一种模式非常方便:嵌套的约简.

const initialState = {
  user: null,
  organisation: null,
  token: null,
  cypher: null,
  someKey: null,
}

function authReducer(state = initialState, action) {
  switch (action.type) {
    case SET_ORGANISATION:
      return {...state, organisation: organisationReducer(state.organisation, action)}

    case SET_USER:
      return {...state, user: userReducer(state.user, action)}

    case SET_TOKEN:
      return {...state, token: action.token}

    default:
      return state
  }
}

在上述示例中，authReducer可以将操作转发到organisationReducer和userReducer，以更新其状态的某些部分.