时间戳

首页 > 解决方案 > 通过在组件内部执行函数来响应 redux 状态变化

javascript - 通过在组件内部执行函数来响应 redux 状态变化

问题描述

我目前正在尝试redux第一次实现我的 react-app。

我创建了一个减速器，与 redux 连接反应并在组件 A 中设置一个动作 - 到目前为止一切都很好。但是如何监听组件 B 内部的状态变化呢？

像这样的东西：

changes.subscribe(value => {
   if (value === 1) {
       this.runSpecificFunction();
   } 
});

换句话说，我想订阅更改，并通过在组件 B 中执行一些函数来对它们做出反应。我该怎么做？


到目前为止我对组件 B 的了解 - 接收组件：

const mapStateToProps = state => {
    return {
        nav: state.navigation
    };
};

export default connect(mapStateToProps)(withRouter(CartHolder));

减速器：

const initialState = {
    navigation: 0 // inactive
};

const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'START_NAVIGATION':
            return {
                navigation: action.value
            };
        case 'STOP_NAVIGATION':
            return {
                navigation: action.value
            };
        default:
            return state
    }
};

export default rootReducer;

标签： javascriptreactjsredux

解决方案

任何状态更改（基于或不基于 redux）都会重新渲染您的子组件。所以使用useEffect钩子应该适合你的用例（https://reactjs.org/docs/hooks-effect.html）。

在您的示例中是这样的：

const CartHolder = () => {
  React.useEffect(() => {
    myCallbackFunction(nav);
  }, [nav]);

  return (...);
};

推荐阅读