Как организовать бизнес-логику в React+Redux+thunk

Question

Я работал на переднем конце с реакции + редукса.

Поскольку все мы знаем, что redux создает компонент контейнера, который отвечает за размещение бизнес-логики. Практически, мы будем предоставлять mapStateToProps и mapDispatchToProps для функции соединения, особенно с mapDispatchToProps, мы можем отправлять события, чтобы заставить редукторы работать значительно.

Есть функциональность мастера, которая имеет много видов типов, и у каждого есть более 10 шагов, поэтому я хочу организовать команду "следующий шаг","предыдущий шаг" и вызвать функцию дочернего элемента, такую ​​как проверка, при нажатии этих кнопок. но я думаю "реф" не рекомендуется. Но с оригинальным дизайном редукса, я должен отправить событие в следующем коде

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

где и как вызывать проверку дочернего контроля - проблема, связанная с дизайном с избыточностью, может быть, нам следует обработать его в создателе действий, но я думаю, что это действие с асинхронным запросом или просто с простым объектом, оно не должно обрабатывать логику, так как мы вводим объект контейнера для обработки "как это работает".

Поэтому я выставляю контроллер в дочернем контейнере, как показано ниже:

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

Этот способ имеет смысл, но я также подумал, что это странно, без ОО, без элегантного дизайна, просто заставить его работать.

так, если есть какие-либо предложения или дизайн для этого сценария?

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