在Redux中更新状态后如何触发回调？

在React中，状态不会立即更新，因此我们可以在中使用回调setState(state, callback)。但是在Redux中如何做呢？

调用之后this.props.dispatch(updateState(key, value))，我需要立即对更新后的状态进行处理。

有什么方法可以像我在React中那样以最新状态调用回调？

组件应更新以接收新的道具。

有一些方法可以实现您的目标：

1. componentDidUpdate检查值是否更改，然后执行某些操作。

 componentDidUpdate(prevProps){
     if(prevProps.value !== this.props.value){ alert(prevProps.value) }
  }

2. redux-promise（中间件将分发promise的已解决值）

export const updateState = (key, value)=>
Promise.resolve({
  type:'UPDATE_STATE',
  key, value
})

然后在组件中

this.props.dispatch(updateState(key, value)).then(()=>{
   alert(this.props.value)
})

2. redux-thunk

export const updateState = (key, value) => dispatch => {
  dispatch({
    type: 'UPDATE_STATE',
    key,
    value,
  });
  return Promise.resolve();
};

然后在组件中

this.props.dispatch(updateState(key, value)).then(()=>{
   alert(this.props.value)
})

关于React的最重要的一点是单向数据流。在您的示例中，这意味着调度动作和状态更改处理应该分开。

您不应该像“我做了A，现在X就成为了Y，我就去处理”那样思考，而是“当X成为时我该做什么Y”，而与无关A。商店状态可以从多个来源进行更新，除了您的组件外，Time Travel还可以更改状态，并且不会通过您的A调度点传递。

基本上，这意味着您应该使用componentWillReceiveProps@Utro提出的建议

使用Hooks API：

useEffect 以道具为输入。

import React, { useEffect} from 'react'
import { useSelector } from 'react-redux'

export default function ValueComponent() {
   const value = useSelectror(store => store.pathTo.value)

   useEffect(() => {
     console.log('New value', value) 
     return () => {
        console.log('Prev value', value) 
     }

   }, [value])

   return <div> {value} </div>
}

您可以使用subscribe侦听器，并且在分派操作时将调用它。在侦听器内部，您将获取最新的商店数据。

http://redux.js.org/docs/api/Store.html#subscribelistener

您可以在回调中使用thunk

myThunk = cb => dispatch =>
  myAsyncOp(...)
    .then(res => dispatch(res))
    .then(() => cb()) // Do whatever you want here.
    .catch(err => handleError(err))

作为一个简单的解决方案，您可以使用： redux-promise

但是，如果您使用redux-thunk，则应该这样做：

function addCost(data) {
  return dispatch => {
    var promise1 = new Promise(function(resolve, reject) {
      dispatch(something);
     });
    return promise1;
  }
}