Update array object in React Redux reducer

Question

This should be simple but I'm not finding the simple answer I want. I have a reducer:

const posts = (state = null, action) => {
  switch(action.type){
    case "PUBLISH_POST":
        return state;
    case "UNPUBLISH_POST":
        return state;
    default:
        return postList;
  }
}

I have a list of posts with ID's and a status. I'm sending in my post ID but can't figure out the logic to simply update the status from 0 to 1 for the item which has been clicked. I've found plenty of half-solutions but they all seem verbose and ugly - what's the shortest/best way of achieving it in this case?

Example data:

{
    id:1,
    user:"Bob Smith",
    content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate mauris vitae diam euismod convallis. Donec dui est, suscipit at dui vitae, sagittis efficitur turpis. ",
    status:1 
}

How does you state look like? Is it an array of posts?

Hemerson Carlin
– Hemerson Carlin

2017-10-17 13:03:42 +00:00
Commented Oct 17, 2017 at 13:03 — Hemerson Carlin
– Hemerson Carlin, Commented Oct 17, 2017 at 13:03
@mersocarlin yes, example above

Matt Saunders
– Matt Saunders

2017-10-17 13:04:48 +00:00
Commented Oct 17, 2017 at 13:04 — Matt Saunders
– Matt Saunders, Commented Oct 17, 2017 at 13:04
What is the action payload?

Thomas Hennes
– Thomas Hennes

2017-10-17 13:09:14 +00:00
Commented Oct 17, 2017 at 13:09 — Thomas Hennes
– Thomas Hennes, Commented Oct 17, 2017 at 13:09

Hemerson Carlin · Accepted Answer · 2017-10-17 13:14:24Z

34

Assuming your action is something like:

{
  type: 'UNPUBLISH_POST',
  payload: {
    id: 1,
    user: 'Bob Smith',
    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate mauris vitae diam euismod convallis. Donec dui est, suscipit at dui vitae, sagittis efficitur turpis. ',
    status: 1
  }
}

Simply use spread operator for it:

const posts = (state = null, action) => {
  switch(action.type){
    case "PUBLISH_POST":
    case "UNPUBLISH_POST":
        const index = this.state.findIndex(post => post.id === action.payload.id)

        return [
           ...state.slice(0, index), // everything before current post
           {
              ...state[index],
              status: action.type === 'PUBLISH_POST' ? 1 : 0,
           },
           ...state.slice(index + 1), // everything after current post
        ]
    default:
        return postList;
  }
}

edited Oct 17, 2017 at 13:14

answered Oct 17, 2017 at 13:08

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

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

5 Comments

Matt Saunders Over a year ago

Thanks. I had to remove "this." from the state. I realise I can not just do a toggle as well, rather than two conditions.

Hemerson Carlin Over a year ago

@MattSaunders you're welcome. I just noticed your state defaults to null. Maybe initialize it as an empty array so you don't have future problems with it :)

T Porter Over a year ago

You might also consider using the immutability-helper module along with the pattern described here.

webmaster Over a year ago

thankss for the slice method, really useful with redux ;)

Nikhil Sinha Over a year ago

Like me, in case someone else is wondering if state.slice(index + 1) will error out if index belongs to the last element in the array, the answer is no. The slice method simply returns an empty array ([]) if the index is out of bounds.

Thomas Hennes · Accepted Answer · 2018-05-07 18:44:58Z

8

A more general solution, especially if state contains other data besides your posts array:

const posts = (state = null, action) => {
  const post = state.posts.find(p => p.id === action.payload.id);
  switch(action.type) {
    case "PUBLISH_POST":
      return { ...state, posts: [ ...state.posts.filter(p => p !== post), { ...post, status: 1 } ] };
    case "UNPUBLISH_POST":
      return { ...state, posts: [ ...state.posts.filter(p => p !== post), { ...post, status: 0 } ] };
    default:
      return state;
  }
}

edited May 7, 2018 at 18:44

answered Oct 17, 2017 at 13:21

Thomas Hennes

10k3 gold badges34 silver badges40 bronze badges

4 Comments

KerSplosh Over a year ago

I think you'd want to return filter(p => p !== post) and the post to update?

Thomas Hennes Over a year ago

@KerSplosh You're absolutely right, thanks. Updated the answer according to your comment.

slavlazar Over a year ago

Won't this mutate the order of the posts array though?

Thomas Hennes Over a year ago

@slavlazar Yes it will. If you need to preserve order then use mersocarlin's solution using slice.

Thremulant · Accepted Answer · 2021-04-08 18:08:14Z

Assuming you have an array of posts, you can search for the ID of the post you want to modify and then update it.

Your initial state:

const initial = {
   posts: [],
}

Your reducer:

case MODIFY_POST:
        return {
            ...state, //Returns the current state
            posts: state.posts.map(post=> post.id === action.id ? // Loop through the array to find the post you want to modify
                { ...post, status: action.status} : post // Copy the post state and then modify it. Else return the same object.
            )
        }

Now, in your actions you can have two actions to toggle the status:

export const enablePost= (post_id) => {
return {
    type: MODIFY_POST,
    id: post_id,
    status: 1
    }
}
export const disablePost= (post_id) => {
return {
    type: MODIFY_POST,
    id: post_id,
    status: 0
    }
}

Mazer Rakham · Accepted Answer · 2019-10-04 14:13:11Z

1

You can just use the spread operator on your state and it will automatically update it the way you want.

example:

    import { GET_ALL_PENDING_DATAOPS, CHANGE_DATAOPS_ASSIGNED_TO } from "../Actions/types";
const initialState = {
  requests: null
};
export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case GET_ALL_PENDING_DATAOPS:
      return {
        ...state,
        requests: payload
      };
      case CHANGE_DATAOPS_ASSIGNED_TO:          
        return {
          ...state,      
          requests:payload         
        }
    default:
      return state;
  }
}

My CHANGE_DATAOPS_ASSIGNED_TO action maps the previous state, in my axios call i am updating a single request object out of an array of requests, since it is returning a single object, and i am not explicitly returning that as just the state, I am using spread, it updates only that object and leaves the rest alone.

edited Oct 4, 2019 at 14:13

answered Sep 30, 2019 at 20:19

Mazer Rakham

437 bronze badges

1 Comment

Sean Over a year ago

Thanks for adding an answer. Can you please include your code within the answer instead of as an image? Posting screenshots of code is bad practice on Stack Overflow.

Collectives™ on Stack Overflow

Update array object in React Redux reducer

4 Answers 4

5 Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related