reactjs - 组件已经渲染后，如何使用 redux-toolkit 从 Redux store 获取更新状态？

Question

我正在寻找的功能是电子商务网站的功能。单击添加到购物车按钮将产品添加到购物车。我能够通过调度一个 Action 成功地实现这一点。发布我想获取更新后的购物车的状态而无需重新呈现组件并将其保存到 localStorage。由于组件不会自行重新渲染，因此 useSelector 在初始渲染时获取的 cartItems 的值不是更新后的值，因此总是落后一个更新。我是 redux 的新手，也是 redux-toolkit 的新手。到目前为止，根据我的研究，我发现 getState() 和 redux-thunk 可能会有帮助，但似乎没有得到好的代码示例。

这是 cartSlice

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    // Todo: add pizza to cart
    addItemToCart: (state, { payload }) => {
      const newItem = payload;
      const existingItem = state.cartItems.find(
        (item) => item.id === newItem.id && item.varient === newItem.varient
      );

      if (existingItem) {
        existingItem.quantity = existingItem.quantity + newItem.quantity;
        existingItem.price =
          existingItem.quantity * existingItem.prices[0][existingItem.varient];
      } else {
        state.cartItems.push(newItem);
      }
    },

和添加到购物车功能

  const [quantity, setQuantity] = useState(1);
  const cartItems = useSelector((state) => state.cart.cartItems);
  const dispatch = useDispatch();

  const handleAddToCart = (pizza, varient, quantity) => {
    let item = {
      id: pizza._id,
      name: pizza.name,
      image: pizza.image,
      varient,
      quantity,
      price: pizza.prices[0][varient] * quantity,
      prices: pizza.prices,
    };
    dispatch(addItemToCart(item));
    dispatch(setTotalPrice());
    dispatch(setCartCount());

    // i want to grab the current state here after it has been updated in line 27 and save it in local storage
  };```

Answer 1

问题

您并不完全需要重新渲染才能从您的商店访问最新状态。您的状态更新晚了一次，因为您正试图在 dispatch 调用后立即从 useSelector 获取值。 dispatch 调用是异步的(但没有 promise 默认“等待”它们)，因此不能保证您的状态在您的选择器调用通过时是最新的。

解决方案

将您的选择器调用移动到一个单独的 useEffect Hook 中，每次 cartItems 更改时都会触发该 Hook 。

useEffect(() => {
    if (cartItems) {
      // Do your thing here
    }
}, [cartItems]); // Guaranteed to be triggered *after* each update

可能的选择

我听说您可以使用 createAsyncThunk await dispatch 调用，但我还没有亲自尝试过。不过，鉴于您在这里的要求，我认为您不需要走那么远。如果您有兴趣，这里是 createAsyncThunk 的文档:https://redux-toolkit.js.org/api/createAsyncThunk