在 React 中，状态不会立即更新，因此我们可以在setState(state, callback). 但是如何在 Redux 中做到呢？
调用 之后this.props.dispatch(updateState(key, value))，我需要立即对更新的状态做一些事情。
有什么方法可以像我在 React 中所做的那样使用最新状态调用回调？
在 Redux 中更新状态后如何触发关闭回调？
IT技术
javascript
reactjs
redux
2021-04-11 04:50:47
6个回答
应该更新组件以接收新的props。
有几种方法可以实现您的目标：
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)
})
使用钩子 API：
useEffect 以props作为输入。
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>
}
React 最重要的一点是单向数据流。在您的示例中，这意味着应该将分发操作和状态更改处理分离。
你不应该想像“我做了A，现在X变成了Y我处理它”，而是“当X变成时我该怎么办Y”，与A. Store 状态可以从多个来源更新，除了你的组件，Time Travel 也可以改变状态，它不会通过你的A调度点传递。
基本上这意味着您应该componentWillReceiveProps按照@Utro 的建议使用
您可以使用subscribe侦听器，它会在分派动作时被调用。在侦听器内，您将获得最新的商店数据。
您可以使用带有回调的 thunk
myThunk = cb => dispatch =>
myAsyncOp(...)
.then(res => dispatch(res))
.then(() => cb()) // Do whatever you want here.
.catch(err => handleError(err))