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

Question

我需要在我的应用程序中共享信息片段，例如用户详细信息、头像和应用程序内提醒。 我担心我可能没有以正确的方式使用 useReducer 和 useContext，因为我只是将所有内容订阅到这个 reducer 并将其用作一个巨大的全局状态设置函数。 我应该以不同的方式处理这个问题吗？

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

更多的是代码质量的问题：

• 将所有这些数据和相关操作存储在这个单一的减速器中是否有意义？
• 将减速器拆分为多个减速器会更合乎逻辑和/或可维护吗？
• 如果我将这个减速器的一部分移动到一个单独的减速器中，它可以在其他地方重复使用吗？

如果你只使用一点状态和少量动作，一个减速器就可以了。 您必须注意的一件事是重新渲染触发：每当您的减速器的状态更新时，每个使用该减速器的组件都必须重新渲染。 对于小状态，这不是问题，但是如果你有很多需要state.fieldA的复杂组件和很多需要state.fieldB的复杂组件，那么它可能值得拆分。 否则更新fieldA也会触发所有只对fieldB感兴趣的组件的重新渲染。 尽管可以进行某些优化以部分抵消这种情况。