Javascript 在 Redux 中更新状态后如何触发关闭回调？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39524855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to trigger off callback after updating state in Redux?
提问by Brick Yang
In React, state is not be updated instantly, so we can use callback in setState(state, callback). But how to do it in Redux?
在 React 中，状态不会立即更新，因此我们可以在setState(state, callback). 但是如何在 Redux 中做到呢？
After calling the this.props.dispatch(updateState(key, value)), I need to do something with the updated state immediately.
调用 之后this.props.dispatch(updateState(key, value))，我需要立即对更新的状态做一些事情。
Is there any way I can call a callback with the latest state like what I do in React?
有什么方法可以像我在 React 中所做的那样使用最新状态调用回调？
回答by Kokovin Vladislav
component should be updated to receive new props.
应该更新组件以接收新的道具。
there are ways to achieve your goal:
有几种方法可以实现您的目标：
1. componentDidUpdatecheck if value is changed, then do something..
1. componentDidUpdate检查值是否改变，然后做一些事情..
componentDidUpdate(prevProps){
if(prevProps.value !== this.props.value){ alert(prevProps.value) }
}
2. redux-promise( middleware will dispatch the resolved value of the promise)
2. redux-promise（中间件会分发promise的解析值）
export const updateState = (key, value)=>
Promise.resolve({
type:'UPDATE_STATE',
key, value
})
then in component
然后在组件中
this.props.dispatch(updateState(key, value)).then(()=>{
alert(this.props.value)
})
2. redux-thunk
2. redux-thunk
export const updateState = (key, value) => dispatch => {
dispatch({
type: 'UPDATE_STATE',
key,
value,
});
return Promise.resolve();
};
then in component
然后在组件中
this.props.dispatch(updateState(key, value)).then(()=>{
alert(this.props.value)
})
回答by just-boris
The most important point about React is one-way data flow. In your example that means, that dispatching an action and state change handling should be decoupled.
React 最重要的一点是单向数据流。在您的示例中，这意味着应该将分发操作和状态更改处理分离。
You shouldn't think like "I did A, now Xbecomes Yand I handle it", but "What do I do when Xbecomes Y", without any relation to A. Store state can be updated from mutiple sources, in addition to your component, Time Travel also can change state and it will not be passed through your Adispatch point.
你不应该像“我做了A，现在X变成Y，我处理它”那样思考，而是“X变成时我该怎么办Y”，与A. Store 状态可以从多个来源更新，除了你的组件，Time Travel 也可以改变状态，它不会通过你的A调度点传递。
Basically that means that you should use componentWillReceivePropsas it was proposed by @Utro
基本上这意味着您应该componentWillReceiveProps按照@Utro 的建议使用
回答by Pranesh Ravi
You could use subscribelistener and it will be called when an action is dispatched. Inside the listener you will get the latest store data.
您可以使用subscribe侦听器，它会在分派动作时被调用。在侦听器内，您将获得最新的商店数据。
回答by YairTawil
With Hooks API:
使用钩子 API：
useEffectwith the prop as input.
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>
}
回答by acmoune
You can use a thunk with a callback
您可以使用带有回调的 thunk
myThunk = cb => dispatch =>
myAsyncOp(...)
.then(res => dispatch(res))
.then(() => cb()) // Do whatever you want here.
.catch(err => handleError(err))
回答by Mohammad P
As a simple solution you can use: redux-promise
作为一个简单的解决方案，您可以使用： redux-promise
But if you using redux-thunk, you should do sth like this:
但是如果你使用redux-thunk，你应该这样做：
function addCost(data) {
return dispatch => {
var promise1 = new Promise(function(resolve, reject) {
dispatch(something);
});
return promise1;
}
}