Question

我在前端使用react + redux。

众所周知，redux创建了一个负责托管业务逻辑的容器组件。实际上，我们将为连接功能提供 mapStateToProps 和 mapDispatchToProps ，特别是 mapDispatchToProps 我们可以调度事件以使Reducer工作得很好。

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

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

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

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

export {
  childContainer,
  childNavController
};

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

 const mapDispatchToProps = (dispatch, ownProps) => ({
    onNext: () => {
        dispatch(nextStep(wizardCreator));
    }
}
const wizardCreator= (step) => {
  // according to the step reuturn 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)，组件接收调度函数作为prop。然后，您可以在调度所需的操作之前定义方法并进行验证逻辑。

例如，

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

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

1 个答案: