使用 Redux 操作获取后在道具上执行逻辑

Question

我最近开始在 React 中使用 Redux。我想知道如何对我刚刚获取的数据执行一些逻辑（这是一种不好的做法吗？），在同一个处理程序中我调用了 redux 操作。我附上一个简单的例子，所以你可以理解我的意思。

 function CakeContainer(props) {
   return (
      <div>
         <h2>Number of cakes - {props.numOfCakes}</h2>
         <button onClick={props.buyCake}>Buy Cake</button>
      </div>
   )

}

props.buyCake工作正常，它numOfCakes从 redux 状态中获取并将显示在组件中的值减 1。所以如果一numOfCakes开始的值是10，点击按钮后就是9。

例如，如果我想乘以numOfCake按钮处理程序内部的值怎么办？组件代码将是

function CakeContainer(props) {
   return (
      <div>
         <h2>Number of cakes - {props.numOfCakes}</h2>
         <button onClick={() => {
           props.buyCake();
           console.log("num multiplied by 2",props.numOfCakes*2)
         }}>Buy Cake</button>
      </div>
   )

}

在控制台日志中，第一次单击按钮后，我有 20 (10*2) 个，因为NumOfCakes尚未更新。有没有办法在处理程序中获得更新的值，还是一种不好的做法？

Answer 1

您可以将回调传递给 redux 操作，您可以在其中获取最新的状态值。这是您的用例的代码和框

https://codesandbox.io/s/reduxexample-forked-dowuj

或者，您可以从您的操作中返回一个承诺并将其解析到您的 cakeContainer。