我正在我的 react-redux 应用程序中设置操作和缩减器。我需要一个函数来更新状态中的属性并将对象添加到其列表中,如果可能的话使用传播语法。这是我到目前为止所拥有的:
const defaultState = {
genres: {}
}
export default function(state = defaultState, action) {
switch(action.type) {
case 'ADD_GENRE':
return {
...state,
genres[action.name]: action.list //new code here
}
default:
return state;
}
}
我需要 genres 属性可以像数组一样使用其属性名称进行动态访问,如下所示:
const getMusicFromGenre = (genre) => {
return state.genres[genre];
}
reducer 应该接受以下操作,然后相应地修改状态:
// action
{
type: 'ADD_GENRE,
name: 'Rock',
list: ['Bohemian Rhapsody', 'Stairway to Heaven', 'Hotel California']
}
// old state
{
genres: {
"Pop": ['Billie Jean', 'Uptown Funk, 'Hey Jude']
}
}
// new state
{
genres: {
"Pop": ['Billie Jean', 'Uptown Funk, 'Hey Jude'],
"Rock": ['Bohemian Rhapsody', 'Stairway to Heaven', 'Hotel California']
}
}
如有必要,我愿意使用不同的方法。
最佳答案
您走在正确的轨道上,但需要分别处理每一层嵌套。这是我为 http://redux.js.org/docs/recipes/reducers/ImmutableUpdatePatterns.html 写的一个例子:
function updateVeryNestedField(state, action) {
return {
....state,
first : {
...state.first,
second : {
...state.first.second,
[action.someId] : {
...state.first.second[action.someId],
fourth : action.someValue
}
}
}
}
}
您可能还想阅读我在 http://redux.js.org/docs/recipes/reducers/PrerequisiteConcepts.html#immutable-data-management 链接的一些关于不可变数据处理的文章和 https://github.com/markerikson/react-redux-links/blob/master/immutable-data.md .
关于javascript - 如何将一个对象属性添加到状态中的另一个属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42659215/