Блог

У меня есть приложение без redux, я обрабатываю глобальное состояние с помощью hooks и контекста hook useReducer . У меня есть 1 useReducer, который делает что-то вроде магазина Redux. Но для этого я могу отправить только 1 редуктор. В этом редукторе у меня есть вся логика состояний, но я хочу отделить некоторые функции этого редуктора от других редукторов. В redux есть combineReducer для этого. Но с помощью hooks context, как я могу это сделать? Как мне объединить множество редукторов, чтобы отправить их моему Глобальному провайдеру в useReducer?

 //Global Provider
const [state, dispatch] = useReducer(reducer, {
        isAuthenticated: null,
        user: {},
        catSelect: 10,
        productsCart,
        total
 });

//reducer with all cases
export default function(state , action ){

    switch(action.type) {
        case SET_CURRENT_USER:
           return etc...
        case SET_CATEGORIA:
           return etc...
        case 'addCart':
            return etc...
        case etc....
        default: 
            return state;
    }
}
  

на данный момент это работает. Но редуктор содержит «случаи», которые делают совершенно другие вещи, чем другие «случаи». Например, «обращение» для аутентификации, еще одно «обращение» для добавления продуктов, еще одно «обращение» для устранения поставщиков и т.д.

С Redux я бы создал больше редукторов (auth, shopCart, поставщики и т.д.) и использовал combineReducer для управления всем этим.

Без уменьшения я должен все смешать в 1, просто уменьшив. Так что мне нужен combineReducer для объединения множества разных редукторов или какой-либо другой способ сделать все это с помощью Hooks context

Я разрабатывал что-то вроде шаблона для этого варианта использования. вот как я сейчас это делаю.

Provider.js

 import appReducer from "./reducers/app";
import OtherAppReducer from "./reducers/otherApp";

export const AppContext = createContext({});

const Provider = props => {
  const [appState, appDispatch] = useReducer(appReducer, {
    Thing: []
  });

const [otherAppState, otherAppDispatch] = useReducer(OtherAppReducer, {
    anotherThing: []
  });

  return (
    <AppContext.Provider
      value={{
        state: {
          ...appState,
          ...otherAppState
        },
        dispatch: { appDispatch, otherAppDispatch }
      }}
    >
      {props.children}
    </AppContext.Provider>
  );
};

  

Reducer.js

 const initialState = {};

export default (state = initialState, action) => {
  switch (action.type) {
    case "action":
      return {
        ...state
      };
    default:
      return state;
  }
};