javascript - 如何不变地更改或更新状态的特定值(how to change or update the specific value of the state immutably)

Question

I'm new to js and react js with redux i'm trying to update a value of the global state immutably This is my current state

(我是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: []
};

i would like to change the isSelected value to true from the questions array of which index having questionTypeId:1 followed by the options array of index:0 Below is the reducer i tried to change the state immutably action.payload value from the ui is 1 and action.value's value from the ui is 0

(我想将isSelected值从带有questionTypeId：1的索引的问题数组中更改为true，然后再选择index：0的options数组。下面是化简器，我试图不可变地更改action.payload值，从ui为1 ui的action.value的值为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
            }]
          }
        ]
          ]
        ]
      };

I try to put all the information as much as i can if anything missing or inappropriate i'm sorry about ,Any help with explanation would be really appriciated ,Thanks in Advance

(如果有任何遗漏或不当之处，我会尽我所能地提供所有信息，对不起，对解释的任何帮助将不胜感激，谢谢)

  ask by Hashim aslam translate from so

Answer 1

At first I notices you split your action's data into action.payload and action.value , this is against the flux principles .

(起初，我注意到您将操作的数据拆分为action.payload和action.value ，这违反了通量原理 。)

You must put your data object in action.payload and get it like action.payload.questionTypeId and action.payload.index .

(您必须将数据对象放入action.payload ，并像action.payload.questionTypeId和action.payload.index那样获取它。)

Well, you can change your store like

(好吧，您可以像)

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;
    }),
  };
};

If I didn't answer your question well enough, you can get more information in redux docs or ask me personally.

(如果我对您的问题的回答不够充分，可以在redux文档中获取更多信息，或者亲自问我。)

Good luck learning!

(祝您学习好运！)