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

Question

我在使用 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，没有优雅的设计，只是为了让它发挥作用。

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

Answer 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);