Use useDispatch() hook inside the react-redux reducer?

Question

I want to fire action from a reducer. The action will set/unset the loader state.

Here is an example of my reducer

const ABC = reducerWithInitialState(initialState)
     .case(getABCAction.started, (state) => {
         const dispatch = useDispatch();
         dispatch(setAppLoader(true))
         return (state);
     });

However, it says that its an invalid hook call.

Is there any workaround for this?

A reducer should never dispatch any actions. It should be a pure function without any side effects. Also the code you presented is not valid javascript. And you can't use hooks outside a react component. A reducer is not a react component. — trixn, Feb 25 '20 at 10:14
@trixn I want a workaround that allows me to set/unset the loader state depending on a few action's 'started, done, failed' states. The above code is bad and I want a fix around it. — Rohan Agarwal, Feb 25 '20 at 10:17
[Only Call Hooks from React Functions](https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions), and [Dispatching an action within a reducer is an anti-pattern](https://stackoverflow.com/a/36731119/82586). — James, Feb 25 '20 at 10:18

score 2 · Accepted Answer · answered Feb 25 '20 at 10:30

2

Rohan, you’re inside the reducer, you have full control to return whatever state you want, you don’t have to dispatch any actions anymore, you can just “do” whatever it is you want to do to the state.

answered Feb 25 '20 at 10:30

Adam

41,349
10
58
78

Agreed. But the problem here is, I have modularzied the app and this reducer is for my module ABC, so the initialState that you see above has the store state/slice of only this Module. But my loader value is to be set in the store state of another module. I want a way to update that store state in this reducer. – Rohan Agarwal Feb 25 '20 at 10:38
Either I need to pass the whole state of the store as the initial state, which I don't want to since it defeats my purpose of breaking redux at module level OR there has to be some other way which I don't know yet, – Rohan Agarwal Feb 25 '20 at 10:39
1

All reducers receive all actions, in your other module just listen to whatever action you want to change you loader flag. – Adam Feb 25 '20 at 10:44
But that's an overkill for my use case since I have 100 API calls going on and i cant duplicate the action on which I want to show/hide the loader in my other reducer. Can you tell me some way where I have a slice of state from one reducer that I needed access to in another reducer? – Rohan Agarwal Feb 25 '20 at 10:49
1

You aren’t duplicating anything, you are just responding to the action (with a switch-case) in your other reducer. – Adam Feb 25 '20 at 11:36
The second last comment gave me the idea to intercept the same action in all the reducer. I solved my concern about writing 100's of switch case combination for intercepting the action by using RegExp. This was an informative comment thread. Thank you @Adam!! – Rohan Agarwal Feb 25 '20 at 12:19

Use useDispatch() hook inside the react-redux reducer?

1 Answers1