update value of an element of object array in redux store

Question

There is a challenge update existing elements value in json array in redux store by an action creater. You can run code here also shared it below;

console.clear()
const CreateTeam = (team, point) => {
  return {
    type:"CREATE_TEAM",
    payload: {team, point}
  }
}

const UpdateTeam = (team, point) => {
  return {
    type:"UPDATE_TEAM_POINT",
    payload: {team, point}
  }
}

const TeamReducer = (state = [], action) => {
  if(action.type == "CREATE_TEAM")
     {
      return [...state, action.payload]
     }
    if(action.type == "UPDATE_TEAM_POINT")
     {
       let point=action.payload.point;

      return [...state, {
        ...state.teams,
        point:point
      }]
     }
  return state;
}

const { createStore, combineReducers } = Redux;

const league = combineReducers({
  teams: TeamReducer
})

const store = createStore(league);

store.dispatch(CreateTeam("TeamA",10));
store.dispatch(CreateTeam("TeamB",20));

store.dispatch(UpdateTeam("TeamA",15));//not work
console.log(store.getState())

create actions works fine, I expected the point value of TeamA set to 15.. but its added new object has only "point" property value 15

lavor · Accepted Answer · 2019-10-04 10:36:00Z

2

There is an error in name of actionTypes:

action dispatches type:"UPDATE_TEAM"
reducer handles action.type == "UPDATE_TEAM_POINT"

You have to perform immutable change, try this:

const TeamReducer = (state = [], action) => {
  if(action.type == "CREATE_TEAM")
     {
      return [...state, action.payload]
     }
    if(action.type == "UPDATE_TEAM")
     {
       const {team, point} = action.payload;
       const changedIdx = state.findIndex((item) => item.team === team);
       return [...state.slice(0, changedIdx), action.payload, ...state.slice(changedIdx + 1)]

     }
  return state;
}

edited Oct 4, 2019 at 10:36

answered Oct 4, 2019 at 10:26

lavor

1,8771 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lavor Over a year ago

I also updated my answer, you were not updating your state correctly, there was nothing like teams in your state.

TyForHelpDude Over a year ago

works nice, but I wonder Does this way of updating store triggers the react component which use that list as props?

lavor Over a year ago

You shold somehow connect react and redux worlds. The best way is the react-redux library. See this section in redxu documentation: redux.js.org/basics/usage-with-react#installing-react-redux

Collectives™ on Stack Overflow

update value of an element of object array in redux store

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related