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

Question

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:

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client]
  }
}

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:

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "",
    clientStatus: "",
    clientAccessGrants: []
  }
}

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.

Yes, you can update ***any*** part of that slice of state in ***any*** reducer case. Do you have a specific issue that isn't working quite as you're expecting? — Drew Reese, Jul 13 '21 at 06:28
even after assigning clientName and clientStatus there,its not getting assigned — rudeTool, Jul 13 '21 at 06:35
What do you mean by "it's not getting assigned"? Can you update your question to include a [Minimal, Complete, and Reproducible Code Example](https://stackoverflow.com/help/minimal-reproducible-example) so we can see how you are updating your state and validating whether or not it updated? — Drew Reese, Jul 13 '21 at 06:38
see i have updated the code with what I am doing with the reducer — rudeTool, Jul 13 '21 at 06:43
I don't see any issue there. Are `clientName`, `clientStatus`, and `clientAccessGrants` normal parts of that state slice? Can you clarify what or where you aren't seeing the state update with these values? Have you installed the redux-dev-tool and browser extension and checked the dispatched actions to your store and examined the DIFF? — Drew Reese, Jul 13 '21 at 06:46
like after pressing a button,I am calling this reducer function.then going on to the other screen this varriables should be updated right? they are not updating and the previous state persists. — rudeTool, Jul 13 '21 at 06:48
If you are dispatching the `ON_SUBMIT_CLIENT` action correctly then I see no reason for your state ***not*** to update. React-redux still has to work with the React component lifecycle, so if you are navigating to another page it's possible the Redux store hasn't updated quite yet. Can you include all relevant code for what you are trying to do and what you have issue with? — Drew Reese, Jul 13 '21 at 06:54

Drew Reese · Accepted Answer · 2021-07-13T09:00:06.013

1

Issue

You've declared the values outside the return.

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

case Actions.ON_SUBMIT_CLIENT:{
  clientName:""; // <-- not returned
  clientStatus:""; // <-- not returned
  clientAccessGrants:[] // <-- not returned
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    
  }
}

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.

case Actions.ON_SUBMIT_CLIENT:
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "";
    clientStatus: "";
    clientAccessGrants: [];
  }

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.

case Actions.SUBIMT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: "",
    clientStatus: "",
    clientAccessGrants: []
  };
}

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.

edited Jul 13 '21 at 09:00

answered Jul 13 '21 at 07:28

Drew Reese

165,259
14
153
181

No,i did it the correct way only.I think the change didnt get pushed – rudeTool Jul 13 '21 at 07:32
@rudeTool I see, do you have a more recent commit to push than the one ~17 minutes ago? If you've updated your code and it's the same as above, then where are you verifying/validating that state wasn't updated? – Drew Reese Jul 13 '21 at 07:36
in Form/layout,see I am accessing the `clientName`,`clientStatus` and `clientAccessGrants` – rudeTool Jul 13 '21 at 07:49
if i am updating the state in PopupActions,then it should be visible in Layout right – rudeTool Jul 13 '21 at 07:52
@rudeTool I can see `FilterCriteriaLayout` is where you are updating these state values. From this component can you walk me through the steps to get to `PopupActions` and clearing these state values? – Drew Reese Jul 13 '21 at 07:54
so after updating these state values,which are taken from a form menu then on clicking save button which is present in popupAction component,I am adding those statevalues to a clientList which is also in the reducer,simultaneosuly I am making those state variables empty. – rudeTool Jul 13 '21 at 07:58
@rudeTool Ok, it turns out your UI is dispatching a different action than your reducer is handling. I updated my answer with a bit more explanation. – Drew Reese Jul 13 '21 at 08:59
I cant believe I didnt check that,I am really sorry for troubling you on a stupid mistake.cant thank you enough for your time.THANKS – rudeTool Jul 13 '21 at 09:05
@rudeTool It's ok, I didn't see it until I was manually dispatching the action the reducer was handling and saw that it was clearing state, then looked closer at the action being dispatched when clicking the save button. Things to consider though: (1) breaking your state up into smaller chunks with multiple reducers (instead of one giant one) each responsible for a small "slice" of state, this makes managing state much easier, (2) adding redux-toolkit to your project, it makes creating actions and reducers way too simple, gets rid of all the boilerplate redux action type definitions. – Drew Reese Jul 13 '21 at 09:14

score 0 · Answer 2 · edited Jul 13 '21 at 07:00

0

if clientName and clientStatus are outside cleintList you can use this code

case Actions.ON_SUBMIT_CLIENT: {
  return {
    ...state,
    clientList: [...state.clientList, action.client],
    clientName: [...state.clientName, action.clientName],
    clientStatus: [...state.clientStatus, action.clientStatus],
    clientAccessGrants: [...state.clientAccessGrants, action.clientAccessGrants]
  }
}

but if no you can use this code

case Actions.ON_SUBMIT_CLIENT:{
state.clientList.clinetName=action.client.clientName
state.clientList. clientStatus =action.client. clientStatus
          return {
            ...state,
            clientList: [...state.clientList, action.client]
          }
        }

edited Jul 13 '21 at 07:00

Sebastian Richner

782
1
13
21

answered Jul 13 '21 at 06:53

Seyed Kazem Mousavi

417
2
8

The second example mutates the current state, very anti-pattern in React. – Drew Reese Jul 13 '21 at 06:55
let me try and pass the value dynamically and update you – rudeTool Jul 13 '21 at 07:00
clientName,clientStatus are not arrays. – rudeTool Jul 13 '21 at 07:04

score 0 · Answer 3 · edited Jul 13 '21 at 06:57

Add clientName and Client Status to you initial state of Reducer also like

const initialState = {
  clientList: [],
  clientName: '',
  clientStatue: ''
}

export default function reducerName(state= initialState, action) {
  switch(action.type) {
    case ON_SUBMIT_CLIENT:
      return {
        ...state,
        clientList: [...state.clientList, action.client],
        clientName:"",
        clientStatus:"",
        clientAccessGrants:[]
      }
  }
}

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

3 Answers3

Issue

Solution

Update