在具有对象数组的reducer中更新redux状态

时间:2018-12-06 09:27:15

标签: javascript reactjs redux react-redux reducers

我是react-redux的新手。

我确实有一个类似的对象

 const initialState = {
        Low: [
            {
                id: 0,
                technologyId: 0,
                technology: '',
                level: 'EASY'
            }
        ],
        Medium: [
            {
                id: 0,
                technologyId: 0,
                technology: '',
                level: 'MEDIUM'
            }
        ],
        High: [
            {
                id: 0,
                technologyId: 0,
                technology: '',
                level: 'TOUGH'
            }
        ]
    }

Now, 

    export default function QuizData(state = initialState, action) {
        switch (action.type) {
            case QUIZ_DATA:
                return {
                    ...state,
                    Low: action.data,
                    error: false,
                } 
            case RESET_SETUP_QUIZ: {
            console.log("intial state is ",  ...state);
            return {
                ...state
            }

现在,这里发生的是经过一些操作,此对象随着每个键具有一些值而发生更改。喜欢,

{
        Low: [
            {
                id: 0,
                technologyId: 11,
                technology: 'xsxs',
                level: 'EASY'
            }
        ],
        Medium: [
            {
                id: 0,
                technologyId: 22,
                technology: 'swwsw',
                level: 'MEDIUM'
            }
        ],
        High: [
            {
                id: 0,
                technologyId: 110,
                technology: 'xsxsx',
                level: 'TOUGH'
            }
        ]
    }

所以,这变了。现在,我要做的是,

那时候用户单击按钮时,我想将其更改为初始状态。

因此它将没有任何值,因为它应该与默认值相同。

所以,我试过了

return {
   initalState
}

但是在这里,初始状态也具有相同的值。

所以,我没有办法使它达到初始水平。

有人可以帮我吗?

1 个答案:

答案 0 :(得分:0)

因为您使用了原始状态对象并返回了它的修改版本(即,您确实影响了initialState)。

您必须在reducer中创建状态的副本,例如

case QUIZ_DATA:
  return Object.assign(
    {},
    state,
    {
      Low: action.data,
      error: false
    }
  )
case RESET_SETUP_QUIZ: {
  return Object.assign(
    {},
    state
  )
}

您有专门的库,例如immutablejs来处理此问题 (https://redux.js.org/recipes/usingimmutablejs