Создание степпера с использованием React и Redux - PullRequest
Новая
       10

Создание степпера с использованием React и Redux

0 голосов
/ 05 мая 2020

Я пытаюсь создать Stepper, используя реакцию и сокращение. Концепция, которую я использую для этого, -

  1. Сохранение активного шага в хранилище redux.
  2. У меня есть список компонентов, и каждый компонент связан с индексом.
  3. В родительском компоненте я визуализирую компонент, индекс которого равен активному шагу.

Вот код для родительского компонента -

У меня есть карта шагов компонента - 

const COMPONENT_STEP_MAP = {
    1: (props) => (
        <Component1
        {...props}
        render = {(props) => <Buttons {...props}/>}
        ></Component1>
    ),
    2: (props) => (
        <Component2
        {...props}
        render = {(props) => <Buttons {...props}/>}
        ></Component2>
    ),}

Вот как выглядит мой Redux Store - 

const initialState = {
  activeTab: 1,
  basicDetails: {
    activeStep: 1,
    name: '',
    }

Вот функция рендеринга родительского компонента - 

 export class ParentComponent extends React.component {
        handleNext = () => {
          if(this.props.activeStep == 1 && 
         this.props.isBusinessOwner==false){ // isBusinessOwner is not showing correct value.
            this.props.setActiveStep(this.props.activeStep + 2)
          }
          else this.props.setActiveStep(this.props.activeStep + 1);
        };
          handlePrevious = () => {
            if(this.props.activeStep == 1 && 
             this.props.isBusinessOwner==false){
              this.props.setActiveStep(this.props.activeStep - 2);
            } else
            this.props.setActiveStep(this.props.activeStep - 1)
          };

       render() {
        return ({Object.entries(COMPONENT_STEP_MAP).map((comp) => {
                      return comp[0] == this.props.activeStep
                        ? comp[1]({handlePrevious, handleNext}):null}}) } }

Я использую react-redux для его подключения в магазин - 

const mapStateToProps = (state) => ({activeStep: state.ownerDetails.activeStep, isBusinessOwner: state.ownerDetails.isBusinessOwner});
  const mapDispatchToProps = (dispatch) => ({
    setActiveStep: (step) => dispatch({type: 'ownerDetails', payload:{activeStep: step}})
  })

  export default connect(mapStateToProps, mapDispatchToProps)(OwnerDetails);

Теперь у меня есть следующий дочерний компонент 

import React from 'react';
import {useSelector, useDispatch} from 'react-redux';

export function IsOwner(props) {
    const isOwner = useSelector(state => state.ownerDetails.isBusinessOwner);
    const setIsBusinessOwner = useDispatch();
    const handleChange = (value) => {
        // console.log('value', value);
        setIsBusinessOwner({type: 'ownerDetails', payload: {isBusinessOwner: value}})
        props.handleNext();
    };
    return (
        <div>
            <h4>Are You Business Owner</h4>
            <button onClick={handleChange.bind(null,true)}>Yes</button>
            <button onClick={handleChange.bind(null,false)}>No</button>
        </div>
    )
}

У меня есть сомнения в следующих 2 строках - 

setIsBusinessOwner({type: 'ownerDetails', payload: {isBusinessOwner: value}})
props.handleNext();

setIsBusinessOwner обновляет store и заставит компонент повторно отрисоваться. Однако после этого я немедленно вызываю props.handleNext(), и компонент исчезнет из DOM.

Итак, когда я получаю доступ к isBusinessOwner из хранилища в родительском компоненте. Это отражает предыдущее значение, а не обновленное значение.

Есть предложения по устранению этой проблемы? Любая помощь будет оценена. Заранее спасибо!! :)

...