Redux - 用动作修改状态的方法答案

【问题标题】：Redux - approach to modifying state with actionsRedux - 用动作修改状态的方法
【发布时间】：2022-08-16 23:13:10
【问题描述】：

您好，我正在尝试创建某种彩票，我想知道应该使用哪种方法通过操作有效负载修改状态。

假设我有状态

type initialCartState = {
    productsFromPreviousSession: Product[]
    selectedProduct: Product
    balance: number,
    productsInCart: Product[]
}

我们的减速器看起来像

const reducers = {
 addProduct(state, action) => {
    state.products.push(state.action.payload.product)
 },
 addProductsFromPreviousSession(state, action) => {
    state.products.push(...state.productsFromPreviousSession)
 },
}

我注意到我在我的组件中对这两种类型使用了两种完全不同的方法，因为它看起来像

const component = () => {
   const selectedProduct = useSelector(state => state.cart.selectedProduct);
   const availableBalance = useSelector(state => state.cart.balance - sum(state.cart.products, \'price\'));
   const dispatch = useDispatch()
   const sumOfProductsFromPreviousSession = useSelector(state => sum(state.cart.products,\'price\'))

   return (
       <div> 
           <div onClick={() => {
              if((balance - selectedProduct.price) > 0) {
                 dispatch(cartActions.addProduct(selectedProduct))
              }
           }}/>
           <div onClick={() => {
              if((balance - sumOfProductsFromPreviousSession) > 0) {
                 dispatch(cartActions. addProductsFromPreviousSession())
              }
           }}/>
       </div>
   )
}

有两种不同类型的处理动作，在 addProduct 中我使用了选择器并在动作负载中传递值。在 Add products from previous session 我们依赖于 reducer 中的状态（也有中间件用于保存在 localStorage 中，但我使用了 store.getState()）。哪种方法是正确的？

还有当我们将 balance 转移到另一个 reducer 时它会如何变化，然后我们将无法访问那个 i cartReducer？

当增量和减量依赖于当前的 reducerState 并且有没有有效负载的操作时，我看到计数器上有很多示例，但是在我的示例中没有使用验证。

提前致谢！

标签： javascript reactjs typescript redux

【解决方案1】：

两种方法都可以使用。基本上，如果您需要在 UI 或流程的其他部分显示状态数据，您应该阅读selector。这样，商店内部的变化可以反应性地反映在组件中。

在您的情况下，您只是使用状态中当前可用的数据更新状态值。因此，您可以在没有有效负载的情况下调度操作。

【讨论】：