How to only change selected state value from useDispatch function in redux

Question

I am using google OAuth for authentication in the nextJS project with next-auth and on login, I store the name, email in the store. but in the initial state, I have many state values and when I try to change only two-state values i.e name and email on login, it mutates/overrides the other empty state values and only these two key-value pairs remain in the state store, is there any way to change only selected state value from state object like spread operator in case of state.

This is the store logic

const initialStateValue = {
  name: "",
  email: "",
  image: "",
  location: "",
  phoneNo: "",
  age: "",
  adress: ""
}

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    value: initialStateValue,
  },
  reducers: {
    login: (state, action) => {
      state.value = action.payload
    },

    logout: state => {
      state.value = initialStateValue
    },
  },
})
export const {login, logout} = userSlice.actions

export default userSlice.reducer

And this is how I am calling the login reducer on initial login

 dispatch(
          login({
            name: session.user.name,
            email: session.user.email,
          })

From the next auth session, I am taking the user name and email, other details in the state can be changed from edit profile option from the FE.

Right now it mutates the current state and only creates these two state values, Initially, I thought that would not be a problem, as I can just override everything from the edit profile page with the info given by the user, but every time user logs in after logging out, the whole state would be reset to these two state values only.

I don't know what's the good practice here in order to prevent this thing. I want to store these basic details on the initial login and show it on the profile section with other details being empty, which can be filled when the user clicks the edit profile option.

Hope I was able to articulate it properly, thanks for reading.

score 0 · Answer 1 · answered Apr 16 '22 at 14:46

This is the issue state.value = action.payload

reducers: {
    login: (state, action) => {
      state.value = action.payload
    },

use spread operator:

login: (state, action) => {
      return {
              // spreads the current state obj
              ...state,
              // spreads the action.payload
              // if there is any property spreaded before, this will just override that part. 
              ...action.payload
      }
    },

How to only change selected state value from useDispatch function in redux

1 Answers1