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

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

Answer 2

使用钩子 API：

useEffect 以道具作为输入。

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

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

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

   }, [value])

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

Answer 3

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

你不应该这样想:"我做了A,现在X变成Y我处理它",而是"我该怎么办的时候X变成Y"无任何关系A.存储状态可以从多个来源更新,除了您的组件,Time Travel还可以更改状态,它不会通过您的A发送点传递.

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

Answer 4

您可以使用subscribe侦听器，它会在分派动作时被调用。在侦听器内，您将获得最新的商店数据。

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