Объединить редуктор без Redux - PullRequest
Новая
       66

Объединить редуктор без Redux

1 голос
/ 10 апреля 2019

У меня есть приложение без избыточности, я обрабатываю глобальное состояние с помощью ловушек и ловушки useReducer + context. У меня есть 1 useReducer, который делает как магазин Redux. Но для этого я могу отправить только 1 редуктор. В этом редукторе у меня есть вся логика состояний, но я хочу разделить некоторые функции, которые уменьшаются в других редукторах. В Redux есть комбайн для этой цели. Но с хуками + контекстом, как я могу это сделать? Как мне объединить множество редукторов, чтобы отправить их моему глобальному провайдеру в 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 я бы создал больше редукторов (авторизация, shopCart, поставщики и т. Д.), И использовал бы combReducer для управления всем этим.

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

1 Ответ

0 голосов
/ 10 апреля 2019

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

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;
  }
};
...