Question

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

在调用this.props.dispatch(updateState(key, value))之后，我需要立即对更新后的状态做一些事情。

有什么方法可以用最新状态调用回调函数，就像我在React中做的那样？

Answer 1

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

有很多方法可以实现您的目标：

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

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

<强> 2。 redux-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。终极版-形实转换

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)
})

Answer 2

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

你不应该这样思考＆＃34;我做过A，现在X变为Y我处理它＆＃34;但是＆＃34;做什么当X变为Y＆＃34;时，我会这样做，与A没有任何关系。存储状态可以从多个来源更新，除了您的组件，Time Travel还可以更改状态，它不会通过您的A发送点传递。

基本上这意味着您应该使用@Utro

提出的componentWillReceiveProps

Answer 3

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

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

Answer 4

您可以使用带回叫的thunk

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

Answer 5

使用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>
}

Answer 6

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

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

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

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

6 个答案: