如何在 mapDispatchToProps 或更新道具后运行回调函数，使用 react redux？

Posted 2023-02-19

【中文标题】如何在 mapDispatchToProps 或更新道具后运行回调函数，使用 react redux？

【英文标题】：How to run callback function after mapDispatchToProps OR update the props, using react redux?

【发布时间】：2020-08-01 02:01:09

【问题描述】：

这是一个例子。

我的代码是：

const mapDispatchToProps = dispatch => (
  onChangeHandler: (name,value) =>
    dispatch( type: "REGISTRATION", key: name, value )
);

但我需要这样的东西：

const mapDispatchToProps = dispatch => (
    onChangeHandler: (name,value) =>
    dispatch( type: "REGISTRATION", key: name, value ).then((nextProps)=>console.log(nextProps))
);

请帮助我们。

【参考方案1】：

const mapDispatchToProps=dispatch=>(
  addToCartHandler:data=>dispatch(addToCart(data)),
  removeToCartHandler:data=>dispatch(removeToCart(data))
)

【参考方案2】：

开箱即用的 Redux 数据流是同步的，因此“然后”调度没有意义，因为它不返回任何内容。您可以在此处阅读更多相关信息：

https://redux.js.org/advanced/async-flow

我建议查看 redux-thunk，它允许您决定何时调度，是同步还是异步，并允许您从存储中检索更新的状态。它通过允许你调度一个函数而不是一个动作来做到这一点。该功能为您提供dispatch 和getState。

这是一个例子：

const onChangeHandler = (name, value) => (dispatch, getState) => 
    // Dispatch event
    dispatch( type: "REGISTRATION", key: name, value );

    // Get updated state
    console.log("state :", getState());
;

export default connect(null,  onChangeHandler )(MyComponent);

但是，如果您正在考虑从组件中创建商店更新的副作用，我建议您使用 useEffect 挂钩来响应由于 redux 商店状态更新组件道具而导致的更新.

这是一个例子：

const MyComponent = (key, value) => 
    useEffect(() => 
        console.log(`key or value updated: $key $value`);
    , [key, value]);

    return (
        <span>Current props are key and value</span>
    )
;