如何不可变地更改或更新状态的特定值

Question

我是 js 的新手，用 redux 对 js 做出反应我正在尝试不可变地更新全局状态的值这是我当前的状态

const initialState = {
  questions: [
    {
      id: 1010,
      name: "Inside which HTML element do we put the JavaScript?",
      questionTypeId: 1,
      options: [
        {
          id: 10,
          name: "javascript",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 11,
          name: "scripting",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 12,
          name: "script",
          isAnswer: true,
          isSelected: false
        },
        {
          id: 13,
          name: "js",
          isAnswer: false,
          isSelected: false
        }
      ]
    },
    {
      id: 1011,
      name: "Javascript is a langague used for ?",
      questionTypeId: 2,
      options: [
        {
          id: 14,
          name: "ConsoleApp",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 15,
          name: "ShellApp",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 16,
          name: "WebApp",
          isAnswer: true,
          isSelected: false
        },
        {
          id: 17,
          name: "MobileApp",
          isAnswer: false,
          isSelected: false
        }
      ]
    },
    {
      id: 1012,
      name: "What is the full form of SPA?",
      questionTypeId: 3,
      options: [
        {
          id: 18,
          name: "Secured and Progressive App",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 19,
          name: "Single Page Application",
          isAnswer: false,
          isSelected: false
        },
        {
          id: 20,
          name: "SOLID Principles for Application",
          isAnswer: true,
          isSelected: false
        },
        {
          id: 21,
          name: "None of the above",
          isAnswer: false,
          isSelected: false
        }
      ]
    }
  ],
  Currentquestion: []
};

我想将问题数组中的 isSelected 值更改为 true，其索引具有 questionTypeId:1 后跟选项index:0 数组下面是我试图不可变地改变状态的减速器 action.payload 值从 ui 是 1 和 action.value's 来自 ui 的值是 0

case SELECT_ANS: {
      const question = action.payload;
      const index = action.value;
      // const newstate = produce(state, draftsate => {
      //   draftsate.questions[question].options[index].isSelected = true;
      // });
      return {
        ...state,questions:[
          {
            ...state.questions[question],options:[{
              ...state.questions[question].options[index],isSelected:true
            }]
          }
        ]
          ]
        ]
      };

我会尽可能多地提供所有信息，如果有任何遗漏或不当之处，我很抱歉，任何解释方面的帮助都会非常感谢，提前致谢

Answer 1

一开始我注意到你将你的动作数据拆分为action.payload和action.value，这是违反the flux principles的。您必须将数据对象放入 action.payload 并像 action.payload.questionTypeId 和 action.payload.index 一样获取它。

嗯，你可以像这样改变你的商店

case SELECT_ANS: {
  return {
    ...store,
    questions: store.questions.map((question) => {
      if (question.questionTypeId === action.payload.questionTypeId) {
        return {
          ...question,
          options: question.options.map((option, index) => {
            if (index === action.payload.index) {
              return {
                ...option,
                isSelected: true,
              };
            }

            return option;
          }),
        };
      }

      return question;
    }),
  };
};

如果我没有很好地回答你的问题，你可以在 redux docs 中获得更多信息或私下问我。

祝学习顺利！

如何不可变地更改或更新状态的特定值

how to change or update the specific value of the state immutably

javascript

immutability

reactjs

redux

react-redux