Skip to content
Advertisement

How to do muliple assign and add operations in reducer function in redux react.js?

I am working on a react app where I am using redux for state management,I am new to this and I have to do multiple state change operations inside a reducer function.

Here’s my reducer function:

JavaScript

What I want to do is,add a item to clientList which I am doing here and then re-assign 2 variables clientName and clientStatus too like:

JavaScript

How can I achieve this inside the reducer function? Any help will be highly appreciated.

Here’s my github link: here

you can see the reducer in clientReducer,the ON_SUBMIT action call in Form/PopupActions.

Advertisement

Answer

Issue

You’ve declared the values outside the return.

https://github.com/Himanshuranjan30/ClientDash2/blob/master/src/clientDashboard/actions/clientReducer.js#L269-L278

JavaScript

Solution

If you want to update the state they need to be returned as part of the next state value returned from the reducer case.

JavaScript

Update

So it seems you are either dispatching the wrong action or handling the wrong action in the reducer.

The submitClient action creator dispatches an action of type Actions.SUBIMT_CLIENT ('CLIENT/SUBIMT_CLIENT') but the reducer case you have is handling an action of type Actions.ON_SUBMIT_CLIENT ('Actions.ON_SUBMIT_CLIENT'). There’s a typo in the spelling of “submit” in the action creator so this one was tricky tracking down.

Updating the reducer to handle the same action type that is dispatched now clears/resets the other state.

JavaScript

Here’s a codesandbox fork of your github repo. I added the redux dev tools so if you have the extension you can see the actions as they are dispatched and check the state diff.

enter image description here

User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement