How to use redux state with react hooks

1
votes

So we recently decided to start using hooks in our current react app. We are using redux for state management and my question was how does this work with hooks?

I've read some articles where people use the context api with hooks to create a state manager but I would like to keep using redux for now.

I know the react api has a useReducer method, can this be used to dispatch redux actions? I've been looking for a tutorial/example but can't seem to find any resources online for this. I may be headed down the wrong path but would like to know if I am. Thanks.

2
reactjsreduxreact-hooks
I came across this project a couple days ago, perhaps it might be of help to you? github.com/dai-shi/react-hooks-easy-redux - Keno Clayton
@KenoClayton Thanks for sharing. I was trying to figure out if there was a way to do this with just new hooks api - bos570
Redux is already managing the state of your component, using useReducer will manage redux calls of your component, this will double layer, and I really see no point on doing this. - Danyal Imran
there's no official solution for this as yet as there are some performance issues to overcome. For now I'd say the best approach would be to continue using the Redux connect HOC with your function components the same way you are with your class components. - lecstor
FYI, I created an abstraction over Redux that uses hooks. May be of interest: github.com/ctrlplusb/easy-peasy - ctrlplusb

2 Answers

2
votes

Nothing changes with hooks when using Redux, Redux Higher Order Component has nothing to do with Hooks. useReducer isn't meant for dispatching Redux actions but for updating the component internal state the same way Redux does.

So when you use useReducer you will dispatch actions, update the state with a reducer etc. but not the Redux state! Instead, you're doing that with the component state.

A component that consumes useReducer is a standard component with an internal state (to manage input states or whatever you want) wrapped, as usual before the hooks born, in a Redux's connect HOC.

If it could be helpful you can clarify your ideas with this post

1
votes

I'm not a heavy user of the Redux (I prefer MobX), so I might be overlooking certain subtle aspects. But from what I see it's pretty straightforward and React docs on hooks provide very nice example:

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter({initialState}) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}

Instead of reducer here, you can simply use one of the related reducers from your existing state management code base. Simply import it into the component file and pass it to the useReducer as the first argument. The state that you will return from there will become a new state for the component and it will auto-rerender itself with it. Obviously you will need to disconnect such component from Redux (if it is connected). Otherwise as it was mentioned in one of the comments you will end up with redundant state management logic.

However on your place I wouldn't rewrite it for hooks without any utter necessity.