当我们已经有mapDispatchToProps时,为什么我们需要redux-thunk

时间:2017-06-12 07:08:32

标签: react-redux redux-thunk

Redux-thunk允许您创建返回函数而不是动作的动作创建者。内部函数接收存储方法dispatch和getState作为参数。

function incrementAsync() {
  return (dispatch, getState) => {
    setTimeout(() => {
       dispatch(increment());
    }, 1000);
  };
}

但与此同时,react-redux' connect已经有一个mapDispatchToProps参数,可用于将动作创建者包装到一个调度调用中,以便可以直接调用它们。使用mapDispatchToProps,你已经可以了,

const mapDispatchToProps = (dispatch) => ({
  incrementAsync: () => {
    setTimeout(() => {
      dispatch(increment());
    }, 1000);
  }
});
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

在我看来,没有redux-thunk就可以实现同样的目标。为什么我们首先要有redux-thunk库?我确定我没有看到它,因为redux-thunk是一个相当受欢迎的库。

4 个答案:

答案 0 :(得分:0)

简而言之,你的解决方案完全没问题。

我认为使用thunk中间件的便利之处在于你可以将任何动作创建者调用异步或不同的方式处理,这意味着你不必传递调度函数。每当你发送的是一个函数调度被注入到它的返回函数中。总而言之,使用redux-thunk可以使动作创建者合成。

请参阅Dan Abramovs详细解答:How to dispatch a Redux action with a timeout?

另外,只看redux-thunk code帮助我理解这一点。

答案 1 :(得分:0)

的确,您可以通过这种方式从操作中访问dispatch,但是redux-thunk使得没有包装函数和显式调度切换成为可能。

您还可以通过作为第二个参数提供的getState()函数从操作中立即访问状态。

// actionFile.js
export someAction(dispatch) {
  return function(value) {
    dispatch({ type: 'SOME_TYPE', value });
  }
}

// component.jsx
const mapDispatchToProps = (dispatch) => ({
  someAction: someAction(dispatch)
});

vs。

// actionFile.js
export someAction(value) {
  return function(dispatch, getState) {
    dispatch({ type: 'SOME_TYPE', value });
    // maybe do some stuff with getState()
  }
}

// component.jsx
const mapDispatchToProps = { someAction };

它绝对是可选的,但我认为它要干净得多,最重要的是,它可以使组件和动作创建者之间的关注点更好地分离。也就是说,当您需要异步下发或触发副作用时,您无需大惊小怪mapDispatchToProps的定义方式。

答案 2 :(得分:0)

除了Redux Thunk之外,第一个示例还有两个大优点:

  1. 由于它是隔离的且功能正常,因此测试起来更容易,因此您只需 需要包括它并使用它来断言它的行为正确 (无道具查询,模拟或浅渲染问题) 如果它在组件中,那么您将拥有它)
  2. 可以重复使用(第二个示例无法重复使用)。想象一下,您必须从应用程序的多个位置分派相同的操作,并使用第二种模式复制代码,然后更改操作要求?

答案 3 :(得分:0)

使用redux-thunk的一大优势是能够在确定操作时访问整个状态,而仅使用mapDispatchToProps是不可能做到的。

您似乎不能只从一开始就获得mapDispatchToProps的整个状态,这似乎很奇怪,但这是有道理的,因为mapDispatchToProps可能在第一次渲染时仅被调用一次,因此传递给它的任何状态都可能过时动作之一被调用的时间。

因此,您可以使用redux-thunk,也可以将所需的全部状态传递给组件作为决定操作的道具,在某些情况下,渲染组件可能无用,从而触发了不必要的操作,并可能导致成本高昂重新渲染,以便您的组件可以用作将数据传递给动作创建者的桥梁。