Question

当用户从一个组件转到另一个组件时，我需要执行一些清理工作。为了保持简单和合理，我创建了一个集中的动作创建者，如下所示：

import { cleanUpX } from 'moduleX';
import { cleanUpY } from 'moduleY';
import { cleanUpZ } from 'moduleZ';

export const cleanUp = () => {

   cleanUpX();
   cleanUpY();
   cleanUpZ();
}

然后我在我的组件的componentWillUnmount()生命周期方法中调用此动作创建者：

class MyComponent1 extends Component {

   ... Code omitted for brevity
   componentWillUnmount() {

      this.props.actions.cleanUp();
   }
}

即使我点击了cleanUp()以及其中的每个动作创作者，我都没有击中他们各自的减速器。

换句话说，我看到我点击cleanUpY()但它结束了，我从未点击减速器来执行实际状态更改。

但是，如果我执行以下操作，则可以正常工作：

class MyComponent1 extends Component {

   ... Code omitted for brevity
   componentWillUnmount() {

      this.props.actions.cleanUpX();
      this.props.actions.cleanUpY();
      this.props.actions.cleanUpZ();
   }
}

我在这里缺少什么？

Answer 1

没有任何反应，因为导入的动作创建者没有绑定到dispatch（与this.props.actions上的对应物不同），因此调用它们只会返回一个动作对象，而不会触发减速器。

您可以手动将dispatch注入道具，然后将其传递给cleanup功能，但最简单的解决方法是安装redux-thunk，然后编写您的动作创建者：< / p>

export const cleanUp = () => (dispatch, getState) => {
  dispatch(cleanupX());
  dispatch(cleanupY());
  dispatch(cleanupZ());
};

然后你像connect那样绑定它，就像你为其他动作创建者所做的那样，并使用this.props.actions.cleanUp()从组件中调用它。

安装redux-thunk非常简单，只需安装npm软件包并将其添加到商店的中间件中即可：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import yourReducer from ...;

const store = createStore(
  yourReducer,
  applyMiddleware(thunk)
);

集中在React / Redux中不起作用的操作

1 个答案: