Question

我有一个没有redux的应用程序，我使用钩子和钩子useReducer +上下文来处理全局状态。我有1个useReducer，它像Redux商店。但是要做到这一点，我只能发送1个减速器。在那个化简器中，我具有状态的所有逻辑，但是我想在其他化简器中分离出该化简的某些功能。在redux中，有CombineReducer可以做到这一点。但是在使用钩子+上下文的情况下，我该怎么做？如何结合许多化简器以在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;
    }
}

目前可以使用。但是，reducer包含的“案例”与其他“案例”的功能完全不同。例如，用于身份验证的“案例”，用于添加产品的另一个“案例”，用于消除供应商的另一个“案例”等。

使用Redux，我可以创建更多的reducer（auth，shopCart，供应商等），并使用CombineReducer来控制所有这些。

没有Redux，我必须将所有内容混合在1中，然后减少。因此，我需要一个CombineReducer来组合许多不同的reducer，或者使用Hooks + context来完成所有这些操作的其他方式

Answer 1

我已经用这个用例开发了一些样板。这就是我目前的做法。

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

结合使用Reduce而不使用Redux

1 个答案: