在 React 中，状态不会立即更新，因此我们可以在 setState(state, callback) 中使用回调。但是在 Redux 中怎么做呢？
调用this.props.dispatch(updateState(key, value))后，我需要立即对更新后的状态进行处理。
有什么方法可以像在 React 中那样调用具有最新状态的回调？
【问题讨论】：
thunk吗？
dispatch() 是一个同步活动。更新后的状态应该在下一行中可用。
thunk。
标签： javascript reactjs redux
应更新组件以接收新的道具。
有多种方法可以实现您的目标：
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)
})
【讨论】：
redux-thunk 示例中，您使用dispatch，就好像它是同步的一样。是这样吗？
dispatch 不是同步的。如果没有Promise.resolve()，this.props.value 仍将返回旧值。仍然需要某种异步延迟（例如，从 setTimeout 中引用也可以）。
TypeError: _this.props.dispatch is not a function?
使用 Hooks API：
useEffect 以 prop 作为输入。
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。存储状态可以从多个来源更新，除了你的组件，时间旅行也可以改变状态，它不会通过你的A调度点。
基本上这意味着您应该使用@Utro 提出的componentWillReceiveProps
【讨论】：
componentWillReceiveProps 已被弃用，现在我们该怎么办？ static getDerivedStateFromProps() 似乎不是一个合适的替代品，因为它不能调用回调，据我所知
您可以使用subscribe 侦听器，它会在分派操作时调用。在侦听器中，您将获得最新的商店数据。
【讨论】：
subscribe 仅在调度操作时触发。 subscribe 不可能让您知道您的 API 调用是否返回了任何数据.. 我想！ :D
您可以使用带有回调的 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;
}
}【讨论】：
redux 的 dispatch 返回一个承诺，您可以像这样链接。
const submissionPromise: any = dispatch(submitFundRequest())
submissionPromise
.then((response: any) => {
if(response.error) {
return console.log('There was an error', response)
}
Swal.fire({
title: 'Submission',
text: 'You have successfully submitted the requisition'
})
})
.catch((err: any) => {
console.log('Submission failed', err)
})
response.error 仅在 thunk 被拒绝时设置。在您的submitFundRequest thunk 中，您可以执行类似的操作来拒绝。
export const submitFundRequest = createAsyncThunk(
'fundRequest/submitFundRequest',
async function submit(payload, thunkAPI) {
try {
...
} catch(e: any) {
const error = { message: e.response.statusMessage }
return thunkAPI.rejectWithValue(error)
}
}
)
【讨论】：