如何在 react-redux 中使用扩展运算符修改索引处的特定对象?

Posted

技术标签:

【中文标题】如何在 react-redux 中使用扩展运算符修改索引处的特定对象?【英文标题】:how to modify a specific object at a index using spread operator in react-redux? 【发布时间】:2017-01-12 11:56:08 【问题描述】:

我想使用扩展运算符。场景是没有玩家(在 UI 上显示为玩家图块)。每当我单击任何播放器图块时,它都会变得活跃(突出显示)。条件是一次只能突出显示一名玩家。因此,当玩家点击它的属性ifActive: true,其余玩家属性ifActive: false playerReducer 被点击的玩家 ID 为 action.payloadaction.payload 给出当前点击的玩家 ID)。现在我必须修改我的state 而不改变它。我必须为此使用扩展运算符。如何使用扩展运算符修改索引处的特定对象?

const initialPlayerState = 
  tabs: [
     id: 1, name: 'player 1', ifActive: false ,
     id: 2, name: 'player 2', ifActive: false ,
     id: 3, name: 'player 3', ifActive: false ,
  ]
 
const playerReducer = (state = initialPlayerState , action) => 
    switch (action.type) 
        case SELECT_PLAYER:
          //how to modify state using spread operator, and how to modify 
          //a specific object at a specific index.  
          return  ...state, /*some code hrere*/;
        default:
          return state;
    

如何使用扩展运算符修改索引处的特定对象?严格来说,我必须使用扩展运算符,每个玩家都应该有ifActive 属性。

【问题讨论】:

【参考方案1】:

如果您需要更新players 之一,例如ifActive 标志,并重新创建tabs 数组以触发选项卡组件的重新渲染,您可以这样做

    const initialPlayerState = 
      tabs: [
         id: 1, name: 'player 1', ifActive: false ,
         id: 2, name: 'player 2', ifActive: false ,
         id: 3, name: 'player 3', ifActive: false ,
      ]
     
    const playerReducer = (state = initialPlayerState , action) => 
        switch (action.type) 
            case SELECT_PLAYER:
              return  
                ...state, // If you have something else in your state
                tabs: tabs.map(player => player.ifActive || player.id === action.id ? 
                  ...player,
                  ifActive: player.id === action.id
                 : player)
              ;
            default:
              return state;
        
    

【讨论】:

这是错误的,因为您正在使用 splice 改变 tabs,而 tabs 是需要不可变的旧状态的一部分。你应该使用slice,而不是splice 这也是错误的,因为您未能取消设置以前的ifActive splice 很好,我的错,谢谢。你对 ifActive 标志的错误更新是正确的。 @DDS 好吧,因为我对 React-Redux 很陌生,所以我不太清楚你的意思。您能否详细告诉我需要做什么。这将是很大的帮助。【参考方案2】:
return  ...state, players: state.players.map(player => ( ...player, selected: player.id === action.id )) ;

【讨论】:

以上是关于如何在 react-redux 中使用扩展运算符修改索引处的特定对象?的主要内容,如果未能解决你的问题,请参考以下文章

react-redux——使用redux——使用react-redux这个扩展

React-Redux 应用程序真的可以像 Backbone 一样扩展吗?即使重新选择。在移动

如何使用 thunk 在 react-redux 挂钩中进行异步调用?

如何在 react-redux 中调用页面刷新的函数?

如何使用 react-redux 存储令牌并在多个 axios 请求中使用它?

React-redux mapStateToProps,mapDispatchToProps 如何使用