【问题标题】:Update array on state after any action of my react-redux reducer在我的 react-redux reducer 执行任何操作后更新数组状态
【发布时间】:2020-05-24 14:40:07
【问题描述】:

我目前正在学习 react-redux,已经掌握了基础知识(我相信),我现在正在尝试在我的状态上创建一个可以由多个操作填充的通知数组。

但由于是通知,我只想在每个操作完成后添加通知(状态已更改)。

我曾考虑过使用中间件类,但这会在对 reduce 计算操作之前将通知添加到数组中。

快速示例:

用户登录 -> 调度操作 -> 影响与登录相关的状态属性 -> 在通知数组上添加通知

用户添加项目 -> 调度操作 -> 影响与项目相关的状态属性 -> 在通知数组上添加通知

这是 2 个不同的操作,我可以在每个操作的 if 逻辑中(在 reducer 上)更新通知数组,但似乎是重复代码,我会在 reducer 上创建通知对象,可以吗?

那么在这种情况下,我应该在哪里分派向通知数组添加通知的操作?

我正在寻找最佳做法

【问题讨论】:

    标签: arrays reactjs redux


    【解决方案1】:

    最佳做法是在reducer 中处理此类情况。一次性处理数据并相应地更新状态。在您的方案中,您希望在完成 action 后更新 notifications 数组。你必须反复这样做,因为它是要完成的。以下是您可以执行的操作:

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

    如果你想删除notification,你可以这样做:

    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
      }
    

    希望这会对你有所帮助。

    【讨论】:

    • 谢谢,很公平。我对此进行了更深入的思考,我将无法从数组中删除通知,我可以将消息的哈希用于 id,但消息将是相同的,我该如何克服这个问题?在我的 UI 上,我会有几个带有关闭按钮的通知弹出窗口,我需要根据我点击的那个来正确识别我从状态中删除的那个,有意义吗?
    • @TiagoM 答案已更新
    • 是的,我明白这一点,但是如何定义通知创建时的通知 ID?使用随机数?
    • 没关系,我可以在 redux 状态中存储另一个变量,初始化为零并在每次添加通知时递增,谢谢!
    猜你喜欢
    • 1970-01-01
    • 2021-01-08
    • 2017-03-22
    • 2019-08-18
    • 2017-08-08
    • 2019-07-18
    • 2019-07-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多