Question

我正在使用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都不会更新，我希望它能更新。

Answer 1

我认为您的问题是将新值推入数组的方式。这不是一成不变的，选择器似乎正在检测到数组没有更改，因此它返回先前的值。

尝试一下：

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)

如何获得Redux useSelector更新商店更改？

1 个答案: