Unstated-next with reducer

complex-state.ts

interface IComplexState {
  reaction: TReactionType | null,
  progress: boolean;
  somethingElse: string;
}

type TComplexReducer = Reducer<IComplexState, IAction>;

type TComplexState = [
  ReducerState<TComplexReducer>,
  Dispatch<ReducerAction<TComplexReducer>>
]

function reducer(state: IComplexState, action: IAction): IComplexState {
  const { type, payload } = action;

  switch (type) {
    case EAction.ADD_REACTION:
      return {
        ...state,
        reaction: payload,
      };
  }

  return state;
}

/**
 * Глобальное состояние
 */
export const ComplexState = createContainer<TComplexState>(useComplexState);

function useComplexState(): TComplexState {
  return useReducer<TComplexReducer>(reducer, {
    reaction: null,
    progress: false,
    somethingElse: '',
  });
}

example.tsx

function ExampleComponent(props: IProps) {
  const [state, dispatch] = ComplexState.useContainer();

  const onClick = useCallback((reaction: TReactionType) => {
    dispatch({ type: EAction.ADD_REACTION, payload: reaction });
  });
  
  return (
    <button onClick={() => onClick('Haha')}>Test click</button> 
  );
}

page.tsx

function Page() {
  return (
    <ComplexState.Provider value={{}}>
      <ExampleComponent />
    </ComplexState.Provider>
  );
}