Question

我遇到一个问题，即重新呈现状态会导致ui问题，并建议仅更新reducer中的特定值以减少页面上的重新呈现量。

这是我的州的例子

{
 name: "some name",
 subtitle: "some subtitle",
 contents: [
   {title: "some title", text: "some text"},
   {title: "some other title", text: "some other text"}
 ]
}

我目前正在更新它

case 'SOME_ACTION':
   return { ...state, contents: action.payload }

其中action.payload是包含新值的整个数组。但是现在我实际上只需要更新内容数组中第二项的文本，这样的东西不起作用

case 'SOME_ACTION':
   return { ...state, contents[1].text: action.payload }

其中action.payload现在是我需要更新的文字。

Answer 1

您可以使用map。以下是一个示例实现：

case 'SOME_ACTION':
   return { 
       ...state, 
       contents: state.contents.map(
           (content, i) => i === 1 ? {...content, text: action.payload}
                                   : content
       )
    }

Answer 2

您可以使用React Immutability helpers

import update from 'react-addons-update';

// ...    

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      1: {
        text: {$set: action.payload}
      }
    }
  });

虽然我想你可能会做更像这样的事情吗？

case 'SOME_ACTION':
  return update(state, { 
    contents: { 
      [action.id]: {
        text: {$set: action.payload}
      }
    }
  });

Answer 3

您无需在一行中执行所有操作：

case 'SOME_ACTION':
  const newState = { ...state };
  newState.contents = 
    [
      newState.contents[0],
      {title: newState.contnets[1].title, text: action.payload}
    ];
  return newState

Answer 4

在我的情况下，根据路易斯的回答，我做了类似的事情：

...State object...
userInfo = {
name: '...',
...
}

...Reducer's code...
case CHANGED_INFO:
return {
  ...state,
  userInfo: {
    ...state.userInfo,
    // I'm sending the arguments like this: changeInfo({ id: e.target.id, value: e.target.value }) and use them as below in reducer!
    [action.data.id]: action.data.value,
  },
};

Answer 5

这在 redux-toolkit 中非常简单，它使用 Immer 帮助您编写看起来像可变的不可变代码，更简洁易读。

// it looks like the state is mutated, but under the hood Immer keeps track of
// every changes and create a new state for you
state.x = newValue;

因此不必在普通的 redux reducer 中使用扩展运算符

return { 
  ...state, 
  contents: state.contents.map(
      (content, i) => i === 1 ? {...content, text: action.payload}
                              : content
  )
}

您可以简单地重新分配本地值，让 Immer 为您处理其余的：

state.contents[1].text = action.payload;

现场演示

Answer 6

晚会很晚，但这是适用于每个索引值的通用解决方案。

您可以创建新阵列并将其从旧阵列扩展到要更改的index。
添加所需的数据。
从您要更改的index到数组末尾创建并传播新数组

let index=1;// probabbly action.payload.id
case 'SOME_ACTION':
   return { 
       ...state, 
       contents: [
          ...state.contents.slice(0,index),
          {title: "some other title", text: "some other text"},
         ...state.contents.slice(index+1)
         ]
    }

Answer 7

这是我为一个项目所做的事情：

const markdownSaveActionCreator = (newMarkdownLocation, newMarkdownToSave) => ({
  type: MARKDOWN_SAVE,
  saveLocation: newMarkdownLocation,
  savedMarkdownInLocation: newMarkdownToSave  
});

const markdownSaveReducer = (state = MARKDOWN_SAVED_ARRAY_DEFAULT, action) => {
  let objTemp = {
    saveLocation: action.saveLocation, 
    savedMarkdownInLocation: action.savedMarkdownInLocation
  };

  switch(action.type) {
    case MARKDOWN_SAVE:
      return( 
        state.map(i => {
          if (i.saveLocation === objTemp.saveLocation) {
            return Object.assign({}, i, objTemp);
          }
          return i;
        })
      );
    default:
      return state;
  }
};

Answer 8

我相信，当您需要在Redux州进行此类操作时传播算子是您的朋友，并且该原则适用于所有孩子。

让我们假装这是您的状态：

const state = {
    houses: {
        gryffindor: {
          points: 15
        },
        ravenclaw: {
          points: 18
        },
        hufflepuff: {
          points: 7
        },
        slytherin: {
          points: 5
        }
    }
}

您想在Ravenclaw中添加3点

const key = "ravenclaw";
  return {
    ...state, // copy state
    houses: {
      ...state.houses, // copy houses
      [key]: {  // update one specific house (using Computed Property syntax)
        ...state.houses[key],  // copy that specific house's properties
        points: state.houses[key].points + 3   // update its `points` property
      }
    }
  }

通过使用传播运算符，您可以仅更新新状态，而其他所有内容保持不变。

摘自amazing article的示例，您可以找到包含示例的几乎所有可能的选项。

Answer 9

恐怕由于要迭代整个数组，所以使用数组的map()方法可能会很昂贵。相反，我结合了一个新的数组，该数组包含三个部分：

head -修改后的项目之前的项目
修改后的项目
tail -修改后的项目

这是我在代码中使用的示例（NgRx，但是其机制与其他Redux实现相同）：

// toggle done property: true to false, or false to true

function (state, action) {
    const todos = state.todos;
    const todoIdx = todos.findIndex(t => t.id === action.id);

    const todoObj = todos[todoIdx];
    const newTodoObj = { ...todoObj, done: !todoObj.done };

    const head = todos.slice(0, todoIdx - 1);
    const tail = todos.slice(todoIdx + 1);
    const newTodos = [...head, newTodoObj, ...tail];
}

如何在redux中更新特定数组项中的单个值

9 个答案:

现场演示