React Hooks: useReducer with actions and selectors (Redux-like)

hooks.js

function useSelectors(reducer, mapStateToSelectors) {
  const [state] = reducer;
  const selectors = useMemo(() => mapStateToSelectors(state), [state]);
  return selectors;
}

function useActions(reducer, mapDispatchToActions) {
  const [, dispatch] = reducer;
  const actions = useMemo(() => mapDispatchToActions(dispatch), [dispatch]);
  return actions;
}

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch(action.type) {
    case 'increment':
    case 'decrement':
      return { count: state.count + action.amount };
  }
}

function Example() {
  const counterReducer = useReducer(reducer, initialState);
  const { increment, decrement } = useActions(counterReducer, (dispatch) => ({
    increment: (amount) => dispatch({ type: 'increment', amount || 1 }),
    decrement: (amount) => dispatch({ type: 'decrement', amount: -(amount || 1) })
  }));
  const { getCount, getDividedBy } = useSelectors(counterReducer, (state) => ({
    getCount: () => state,
    getDividedBy: (amount) => state.count / amount
  }));

  return (
    <div>
      <p>Current count is {getCount()} and divided by two: {getDividedBy(2)}</p>
      <button onClick={() => increment(1)}>+</button>
      <button onClick={() => decrement(1)}>-</button>
    </div>
  )
}

I rarely have a need for this kind of abstraction using Contexts and Hooks. What I do for state in a shared area is have two contexts, one that represents the state (e.g. TodosState), and another that can be used to update the state (e.g. TodosDispatch).

If I even run into performance issues I use a combination of React.memo/useMemo. I recommend reading on how you can use useMemo to optimize expensive renders.

if you really want to replace Redux using hooks I suggest using the useReducer and useContext hooks, they are easy to understand and quite flexible, here is an article that compares Redux and React hooks and detail:
https://www.framelessgrid.com/react-hooks-vs-redux-for-state-management-in-2021/

I have since moved on from this style of state management and gone to libraries like Recoil, jotai and XState. I found that reducers and contexts required a lot of boilerplate, and the fact that managing memoized components is cumbersome and can become hard to debug.

Another issue is that useContext currently has no way to select state to prevent unnecessary re-renders out of the box (although they are experimenting with an API to do this). For medium to large projects, which depends on a lot of state, having to implement this myself would be a waste, when most state management libraries already handles this for you.

I still use Context for things like dependency injection (e.g. in contrast to deep prop-drilling) and useReducer in small projects which are easy to debug and doesn't need to type of performance that state management libraries provide.

If I were to use Redux, I'd use Redux Toolkit.