0

我有一个页面，上面有几个组件，其中一个组件读取 redux 状态。当 redux 对象组件发生一些变化时，它会重新加载，显示微调器并且组件上的所有数据都会更新。但我的任务是更新 redux 对象状态中的单个值，而无需重新渲染和刷新所有内容。例如这里是 redux 对象，它包含一个包含一些数据的对象数组。我需要更新state某个对象中的一个值，比如说最后一个。但我需要这样做而不必更新所有状态。

state:{
 0:{
  name : 'some name.....',
  surname: 'some surname',
  age: '23',
  phone: '+12345678'
  state: 'ON' 
 },

 1:{
  name : 'some name.....',
  surname: 'some surname',
  age: '23',
  phone: '+12345678'
  state: 'ON' 
 },

 2:{
  name : 'some name.....',
  surname: 'some surname',
  age: '23',
  phone: '+12345678'
  state: 'OFF' <-- I need to update only this one 
 },

}

我在 Redux 操作中有一个函数可以加载所有这些数据。

但现在我需要一个单独的函数updateData函数，它将更新现有状态对象中的一个值，而无需刷新所有内容。

在 Redux 中可以这样做吗？

4

3 回答 3

1

您需要熟悉 Redux 中的 action 和 reducer 是如何工作的，但是是的，这绝对是可能的。

你可以创建一个UPDATE_DATA动作创建者，你可以在你的反应组件中调用它。你会有一个 reducer 来控制数据的处理方式和状态的改变。

-edit- 正如评论中提到的，我在 Redux 的减速器中使用“immer”。这是我如何使用它来编辑和现有数组中的项目的示例：

case EDIT_ITEM:
      return produce(state, (draft) => {
        const index = findItemIndex(draft, action.payload._id)
        draft[index] = action.payload
      })

所以你传入状态和回调，草稿是状态对象的可变等价物。

于 2021-11-11T18:43:57.150 回答
1

您的状态是对象的对象（不是数组）。您不能更新您所在州的单个属性。您必须提供具有更新值的新对象。研究 redux 中的不变性：https ://redux.js.org/faq/immutable-data

在你的减速器中试试这个：

const changedVal=state[2];
changedVal.state='ON';
return {...state,changedVal};
于 2021-11-11T19:12:16.667 回答
0

简而言之，实际上不可能更新一个属性。当然做不到，但是难度很大。我可以解释为什么。

让我们从更新项目开始。这绝对是可能的。假设您有一个 redux 选择器data在将数据发送到组件时监听 ,。

  const DisplayOneItem = React.memo(( name, age ) => { ... })

您可以看到，首先将name(and age) 发送到该组件，还React.memo应用 a 以便只有当其中一个属性发生更改时，它才能更新。但不要与以下行混为一谈：

  const DisplayOneItem = React.memo(( item ) => { ... })

上面的行占据item了整个位置，当您更改一个属性时，item更改也会发生变化，因此无论如何，您都会得到一个新的更新。

你可能想知道如果React.memo不使用会发生什么？是的，一直渲染。实际上，如果您更改属性，则要么item完全更改，要么data完全更改。否则你如何通知 React 有变化？:)

注意：默认情况下， React无法根据值更改进行更新。它更新的原因是因为您要求它通过setState({ ...data }). 所以现在的问题是您如何控制调度（或渲染）的粒度。人们可能认为React在渲染方面很神奇，但实际上它只是在请求时才这样做。所以现在你的问题是，我要求它渲染，但它不应该渲染？哈哈，你明白了。

于 2021-11-11T18:48:14.567 回答