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

Question

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

我创建了一个减速器，与 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;

Answer 1

任何状态更改（是否基于 redux）都将重新渲染您的子组件。 因此，使用useEffect钩子应该适合您的用例（ https://reactjs.org/docs/hooks-effect.html ）。

在你的例子中是这样的：

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

  return (...);
};