时间戳

首页 > 解决方案 > 如何让我的 Redux useSelector 更新存储更改？

javascript - 如何让我的 Redux useSelector 更新存储更改？

问题描述

我正在使用 Redux Toolkit，我正在努力寻找一种方法来更新我的商店中的状态，这也会触发对 useSelector 的重新分配。

const slice = createSlice({
  name: "state",
  initialState: [],
  reducers: {
    addToArray: (state, action) => {
      state.push(action.payload); // This updates the store but doesn't respect immutability?
   }
 }
});

我知道上述内容并不完全正确，并且类似

state = [...state, ...action.payload]

会更好，但由于某种原因，我无法以任何其他方式正常工作。我只是想将一个对象添加到数组中。

我的组件：

export default function App() {
   const array = useSelector(selectArray);

   return (
     {array.map((x) => {
        <div>{x.text}</div>
     })
   )
}

问题是，无论何时调用调度，array都不会更新，这是我想要的。

标签： javascriptreactjsreduxredux-toolkit

解决方案

我认为您的问题是您将新值推入数组的方式。这不是一成不变的，看起来选择器检测到数组没有改变，所以它返回之前的值。

尝试这个：

const slice = createSlice({
  name: "state",
  initialState: [],
  reducers: {
    addToArray: (state, action) => {
      state = [ ...state, action.payload ];
   }
 }
});

这个演示应该模拟可变状态与不可变状态时发生的情况。

const state = {
  list: [1]
}

const addItemMutable = (item) => {
  const prevState = { ...state }
  state.list.push(item)
  
  // Using JSON.stringify for better readability in output.
  console.log(JSON.stringify(prevState.list), JSON.stringify(state.list))
  console.log(prevState.list === state.list)
}

const addItemImmutable = (item) => {
  const prevState = { ...state }
  state.list = [ ...state.list, item ]

  // Using JSON.stringify for better readability in output.
  console.log(JSON.stringify(prevState.list), JSON.stringify(state.list))
  console.log(prevState.list === state.list)
}

addItemMutable(2)
addItemImmutable(3)

推荐阅读