React+Redux+thunk如何组织业务逻辑

Posted 2023-02-22

【中文标题】React+Redux+thunk如何组织业务逻辑

【英文标题】：How to organize the business logic in React+Redux+thunk

【发布时间】：2018-06-06 12:05:03

【问题描述】：

我在使用 react + redux 的前端工作。

众所周知，redux 创建了一个容器组件，负责托管业务逻辑。实际上，我们会为 connect 函数提供 ma​​pStateToProps 和 ma​​pDispatchToProps，通过 ma​​pDispatchToProps 我们可以将事件分发给 reducer。

向导功能有很多种类型，每一个都有10多个步骤，所以我想组织“下一步”、“上一步”命令和调用验证等子元素功能单击按钮，但我认为“ref”不是推荐的方法。 但是对于redux的原始设计，我必须在下面的代码中调度事件

 const mapDispatchToProps = (dispatch, ownProps) => (
    onNext: () => 
        dispatch(nextStep());
    

在哪里以及如何调用子控件的验证是一个问题，对于redux设计，也许我们应该在action creator中处理它，但我认为它是一个带有asyn请求的action或者只是一个普通对象，它不应该处理逻辑，因为我们引入了容器对象来处理“它是如何工作的”。

所以我在子容器中公开了一个控制器，如下所示：

export 
  childContainer,
  childNavController
;

子容器用于渲染子元素和逻辑，childNavController 暴露验证功能。但是这样我们就无法访问调度对象，所以我在下面这样做：

 const mapDispatchToProps = (dispatch, ownProps) => (
    onNext: () => 
        dispatch(nextStep(wizardCreator));
    


const wizardCreator= (step) => 
  // according to the step return different controller instance
  return childNavController;
;

在动作创建者文件中：

const nextStep=(childCreator)=>
   return function (dispatch, getState) 
     return Promise.resolve().then(()=>
        const currentState = getState();
        const controller=childCreator(currentState.step);
        // this make the business also can work with dispatch object
        controller.validation(dispatch, getState);
     );
   

这是一种有意义的方式，但我也觉得它很奇怪，没有OO，没有优雅的设计，只是为了让它发挥作用。

是否有人对如何针对这种情况进行设计提出建议？

【参考方案1】：

使用mapDispatchToProps 来调度组件内的操作不是强制性的。只是为了调用connect(null)(Component)，组件接收调度函数作为道具。然后，您可以定义一个方法并在调度您需要的操作之前执行验证逻辑。

例如，

import React from 'react';
import  connect  from 'react-redux';

const Container = (props) => 
  const onClick = () => 
    // some logic
    if (valid) props.dispatch(someAction())
  
  return <button onClick=onClick>Next</button>


export default connect()(Container);

【讨论】：

其实redux中的容器是由redux的connect函数生成的。当然，您代码中的 Container 是一个表示组件，我知道我们可以像您一样使用容器组件，但是在这里我想将复杂的 UI 分成 2 个文件，一个是表示的，另一个只包含逻辑，也就是说，该文件仅导出连接的结果。那么在这种情况下如何合理地获取调度和状态（不在 mapDispatchToProps 中）。