How to trigger off callback after updating state in Redux?

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

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

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

120919 次浏览
小开

您可以使用 subscribe侦听器，当一个动作被分派时，它将被调用。在侦听器内部，您将获得最新的存储数据。

Http://redux.js.org/docs/api/store.html#subscribelistener

小开

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

有很多方法可以实现你的目标:

检查 value 是否已更改，然后执行某些操作。

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

(中间件将分派承诺的解析值)

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

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

你不应该像“我做了 A，现在 X变成了 Y，我处理它”那样思考，而是“当 X变成 Y时我该怎么办”，与 A没有任何关系。存储状态可以从多个来源更新，除了您的组件，时间旅行也可以改变状态，它将不会通过您的 A调度点。

基本上，这意味着您应该使用 componentWillReceiveProps，因为它是由@Utro 提出的

小开

你可以在回调中使用 thunk

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

作为一个简单的解决方案，你可以使用: 还原承诺

但是如果你使用 再来一次，你应该这样做:

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

小开

使用 Hooks API:

useEffect with the prop as input.

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>
}
小开

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

仅当拒绝 Thunk 时才设置 response.error。在您的 submitFundRequest思想，您可以做这样的事情来拒绝。

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

提交答案