React useContext & useReducer - 在应用程序中需要全局状态，对使用一个和多个 reducer 感到困惑

Question

I need to share pieces of information across my app, like user details, avatar, and in-app alerts. I'm concerned I might not be using useReducer and useContext the right way since I'm just subscribing everything to this one reducer and using it as a giant global state-setting function. Should I be approaching this differently?

const initialState : IStore = { isLoading : true, isSignedIn : false, newUser : false, hero : null, alerts : [] };
const store = createContext<IStore>(initialState);
const { Provider } = store;

const StateProvider : React.FC = ( { children } ) => {
  const [state, dispatch] = useReducer((state : IStore, action : IAction) => {

    switch(action.type) {
      case 'TOGGLE LOADING': {
        const { isLoading } = action.payload;
        if(typeof isLoading === 'undefined'){
          return Object.assign({}, state, { isLoading : !state.isLoading });
        }
        return Object.assign({}, state, { isLoading });
      }
      case 'SET EXISTING USER INIT DATA': {
        const { user, hero, gameItems, latestBattle, isSignedIn } = action.payload;
        return { ...state, ...{ user, hero, gameItems, latestBattle, isSignedIn } };
      }
      case 'SET ISSIGNEDIN': {
        const { isSignedIn } = action.payload;
        return { ...state, isSignedIn };
      }
      case 'SET NEW USER': {
        const { newUser } = action.payload;
        return { ...state, newUser };
      }
      case 'SET HERO': {
        const { hero } = action.payload;
        return { ...state, hero };
      }
      case 'SET USER': {
        const { user } = action.payload;
        return { ...state, user };
      }
      case 'SET ALERTS': {
        const { alerts }  = action.payload;
        return { ...state, alerts : [...alerts] };
      }
      case 'REMOVE ALERTS': {
        const { indiciesForRemoval } = action.payload;
        return { ...state, alerts : 
          state.alerts.filter((alert) => {
            return !indiciesForRemoval.includes(alert.index);
          })
        };
      }
      default:
        throw new Error('In Store default, should not happen.');
    };
  }, initialState);

  return (
    <Provider value={{ state, dispatch }}>
      {children}
    </Provider>
  );
};

Answer 1

It's more of a question of code quality:

• Does it make sense to store all this data and the related actions in this single reducer?
• Would be more logical and/or maintainable to split the reducer into several reducers instead?
• If I move part of this reducer into a separate reducer, could it be reused elsewhere?

If you're only using a bit of state and only a handful of actions, a single reducer is just fine. One thing you have to look out for is re-render triggering: whenever your reducer's state gets updated, every component making use of that reducer will have to be re-rendered. For small states, not a problem, but if you eg have a lot of complex components needing state.fieldA and a lot of complex components needing state.fieldB , then it might be worth splitting. Otherwise updating fieldA would also trigger a re-render for all the components that are only interested in fieldB . Although certain optimizations could be made to partially counteract that.