首页 文章

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

提问于
浏览 次
2

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是一个相当受欢迎的库 .

react-redux redux-thunk

3 回答

  • 0

    除了Redux Thunk之外，第一个例子有两大优势：

    • 它's easier to test as it'是隔离的和功能性的，所以你只需要包含它并使用以断言它的行为是正确的（没有支持查询，模拟或浅层渲染的问题，你在组件中是'll have if it'）

    • 可以重复使用它（第二个例子是不可能重复使用的） . 想象一下，您必须从应用程序中的多个位置调度相同的操作并使用第二个模式，复制代码，然后更改操作的要求？

    回复于
  • 0

    总之，你的解决方案完全没问题 .

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

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

    也只是看着redux-thunk code让我理解这一点 .

    回复于
  • 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)
});

    与

    // 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 };

    这绝对不是必要的，但在我看来提供便利并清理代码 .

    回复于

相关问题