Разъяснение по магазинам в Reactjs -Redux

Question

В настоящее время я изучаю, как использовать Redux в моем приложении ReactJS, и все увиденные мной уроки наводят меня на мысль, что в Redux может быть только один магазин. В реальных приложениях у вас может быть несколько потоков данных, поступающих из API REST или другого источника. Так, например, я могу просматривать список клиентов в одном компоненте, список проектов в другом и список пользователей в другом. Мой вопрос: позволяет ли Redux создать хранилище для каждой сущности с собственным редуктором и действиями? Например, клиентский магазин, проектный магазин и пользовательский магазин? Если нет, то как бы организовать это в одном магазине, не запутав все? Спасибо.

* РЕДАКТИРОВАТЬ * Так что мое состояние будет выглядеть примерно так:

let initalState={
     customers:{
          data:[]
          ...
     },
     projects:{
          data:[]
          ...
     }
     users:{
          data:[]
          ...
     }
}

Answer 1

Я думаю, что combreducers - это то, что вы ищете.

По мере усложнения приложения вы захотите разделить свою функцию сокращения на отдельные функции, каждая управление независимыми частями состояния.

Вспомогательная функция combiReducers превращает объект, значения которого являются различными функциями сокращения, в одну функцию сокращения, которую вы можете передать в createStore.

Представьте, что вы хотите управлять клиентами, проектами и пользователями.

Вы получите один редуктор для каждой функции:

const customersInitialState = {data:[], ...}
export default function customersReducer(state = customersInitialState , action) {
  switch (action.type) {
    case 'ADD':
      return {...state, data: [...state.data, action.payload]}
    default:
      return state
  }
}

Затем вы объедините все эти редукторы в один

export default combineReducers({
  customers: customersReducer,
  projects: projectsReducer,
  users: usersReducer
})

const store = createStore(reducer)

Наконец, состояние вашего магазина будет быть таким:

{
  customers: {data: [], ...},
  projects: {data: [], ...},
  users: {data: [], ...},
}