Adding one element in array in React-Redux

Question

I have a project, where I use react-redux, and I have a reducer, which by idea should add one element in array and return new array. How I can do this?

/*---- Reducer ----*/
case CHANGE_EVENT_USERS:
  return { ...state, users: payload };
 
/*---- Here's my hopeless tryings ----*/

userClickHandler() {
  const { id, homeFloor, avatarUrl, login } = this.props;
  const user = { id, homeFloor, avatarUrl, login };
  this.props.changeEventUsers([...user]); // []
  this.props.changeEventUsers(this.props.event.users.push()); // number
}

use push method for array

Hushme
– Hushme

2018-01-12 11:03:31 +00:00
Commented Jan 12, 2018 at 11:03 — Hushme
– Hushme, Commented Jan 12, 2018 at 11:03
@Hushme, also tried

Rami Chasygov
– Rami Chasygov

2018-01-12 11:06:27 +00:00
Commented Jan 12, 2018 at 11:06 — Rami Chasygov
– Rami Chasygov, Commented Jan 12, 2018 at 11:06

Matus · Accepted Answer · 2018-01-12 11:12:12Z

3

I'm not sure if I understand you correctly but from my understanding the solution to your problem would look something like this:

case CHANGE_EVENT_USERS:
  return { ...state, users: [ ...state.users, action.payload ] };

answered Jan 12, 2018 at 11:12

Matus

1001 silver badge7 bronze badges

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

Comments

jb cazaux · Accepted Answer · 2018-01-12 11:16:56Z

2

I like better the syntax of concat. In your reducer do:

case CHANGE_EVENT_USERS:
  return users.concat(action.payload);

answered Jan 12, 2018 at 11:16

jb cazaux

3201 silver badge8 bronze badges

Comments

Raul Rene · Accepted Answer · 2018-01-12 11:11:24Z

1

Do the add directly in the reducer.

From your component

this.props.changeEventUsers(newUser); // add the new user

In the reducer

return { ...state, users: [...state.users, payload] };

I made the assumption that "payload" contains the info coming from the action and the users array is by default initialised with an empty array value []

answered Jan 12, 2018 at 11:11

Raul Rene

10.3k9 gold badges56 silver badges79 bronze badges

3 Comments

Rami Chasygov Over a year ago

in initial state I assign hole array, that why I try don't mess with reducer

Raul Rene Over a year ago

@RamzanChasygov try the above example. You should hold the entire array in reducer and only manipulate it there. That's the purpose of reducers. You shouldn't to manipulations inside the react components. So at the beginning of the reducer where you define the initial state define it with users: [], and subsequent additions should be done via the CHANGE_EVENT_USERS action

Rami Chasygov Over a year ago

In initial state I need use object and users is one of this key

Zoe - Save the data dump · Accepted Answer · 2019-04-28 13:58:02Z

Use concat()

const initialArray = [1, 2, 3];  
const elemenToAdd = 4; 
const newArray= initialArray.concat([elementToAdd]);

[1, 2, 3, 4]

Notice I'm using const here to emphasize that the initial array was not mutated.

The great thing about the method above, it's that it can be used to chain operations together.
result = initialArray.concat(..).filter(..).concat(..);
(where .. represents skipped code details)

You can also use concat by passing in arrays as parameters:
newArray = concat(initialArray, [elementToadd])

Or use es7 spread operator syntax for array concatenating:
newArray = [...initialArray, elementToAdd, ...[5], [6] ];

[1, 2, 3, 4, 5, [6] ]

Use ... to send individual elements of the supplied array to be elements in the new array; without the dots, the supplied array is itself the element.

So in the your case, the line in question could be written as:

Zoe - Save the data dump · Accepted Answer · 2019-04-28 13:58:13Z

0

I found my solution:

this.props.changeEventUsers([...this.props.event.users, user]);

edited Apr 28, 2019 at 13:58

Zoe - Save the data dump

28.4k22 gold badges130 silver badges163 bronze badges

answered Jan 12, 2018 at 11:38

Rami Chasygov

2,79410 gold badges27 silver badges40 bronze badges

Collectives™ on Stack Overflow

Adding one element in array in React-Redux

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related