Update array on state after any action of my react-redux reducer

Question

I am learning react-redux at the moment, already grasped the basics (I believe), I am now trying to create a notification array on my state that can be populated by several actions.

But since is a notification, I only want to add a notification after each of those actions is completed (the state is changed).

I thought about using a middleware class but that would add the notification into array before the action is computed on the reduce.

Quick example:

User logins -> dispatch action -> affects state property related to login -> adds a notification on the notification array

User adds item -> dispatch action -> affects state property related to items -> adds a notification on the notification array

These are 2 different actions, I could in the if logic of each action (on reducer) update the notification array, but seems like repeated code and I would be creating notification object on a reducer, is that okay?

So in this case where should I dispatch the action of adding a notification to the notification array?

I am looking for best practices

Muhammad Zeeshan · Accepted Answer · 2020-02-08 20:29:47Z

1

The best practice is to handle such scenario's in reducer. Process the data one-time and update state accordingly. In your scenario, you want to update the notifications array once the action is completed. You have to do that repeatedly because it is to be done. Here is what you can do:

case LOGIN:
  //checks if user is valid
  return {
     ...state
     loggedIn: true,
     user,
     notifications: state.notification.push({ id: 1, message: "Logged In!" })
  }

And if you want to remove a notification you can do that:

case REMOVE_NOTIFICATION:
  // You can get the notification ID you want to remove from action
  let notifications = state.notification.filter(notify => notify.id !== action.id);
  return {
     ...state
     notifications
  }

Hope this will help you.

edited Feb 8, 2020 at 20:29

answered Feb 8, 2020 at 20:20

Muhammad Zeeshan

4,7784 gold badges19 silver badges42 bronze badges

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

4 Comments

TiagoM Over a year ago

Thanks, fair enough yeah. I was thinking more deep into this, and I will have problems deleting the notifications from the array, I could use for id an hash for the message but the message will be the same, how can I overcome this? on my UI I will have several popups of notifications with a close button, and I need to correctly identify which one I am deleting from the state according to the one I am clicking, makes sense?

Muhammad Zeeshan Over a year ago

@TiagoM Answer Updated

TiagoM Over a year ago

Yes I understand that, but how do I the define the id for the notifcations on notification creation? use a random number?

TiagoM Over a year ago

nevermind, I can store in the redux state another variable initialize to zero and increment on each notification add, thanks!

Collectives™ on Stack Overflow

Update array on state after any action of my react-redux reducer

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related