如何在 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.payload
(action.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 挂钩中进行异步调用?