Wie man aktiven Schritt ändert, kommt von "Reduzierer", wenn Elemente geklickt werden, die aus "Reduzierer"

Question

sind Ich arbeite an Reaktiv-Redux & es gibt etwas, das ich nicht verstehen kann. Ich habe eine Aktion erstellt & Wurzelreduzierer & active_step Reducer & list_step Reducer. Ich kann aktive Schrittkomponente aus der dynamisch gemappten Navigation ändern.

//step-list.js

import React, {Component} from 'react' 
import {connect} from 'react-redux' 
import {bindActionCreators} from 'redux' 
import {selectStep} from '../actions/index' 

class StepList extends Component { 
    render() { 
     const renderSteps = this.props.steps.map((item, index) => { 
      return (
        <li 
         key={item.stepNumber} 
         onClick={() => { 
           this.props.selectStep(item) 
          } 
         } 
         className="step-group-item"> 
         {item.title} 
        </li> 
       ) 
      } 
     ) 

     return (
      <ul className="step-group"> 
       {renderSteps} 
      </ul> 
     ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
     steps: state.steps 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({selectStep: selectStep}, dispatch) 
} 

export default connect(mapStateToProps, mapDispatchToProps)(StepList) 

//active-step.js

import React, {Component} from 'react' 
import {connect} from 'react-redux' 

class ActiveStep extends Component { 
    render() { 
     if(!this.props.step) { 
      return <div className="active-step">There are no steps selected</div> 
     } 

     return (
      <div className="active-step"> 
       <h3>Step Title: {this.props.step.title}</h3> 
       <h5>Step Subtitle: {this.props.step.subTitle}</h5> 
       <p>Step Number: {this.props.step.stepNumber}</p> 
       <div> 
        {this.props.step.content} 
       </div> 
      </div> 
     ) 
    } 
} 

function mapStateToProps(state) { 
    return { 
     step: state.activeStep 
    } 
} 

export default connect(mapStateToProps)(ActiveStep) 

//

Nun gibt es eine weitere Komponente in der Hauptkomponente (app.js). Sein Name ist Footer & es hat 3 Tasten. Ich kann & ausblenden "Zurück", "Weiter", "Erfolg" -Schaltflächen Schlüssel zu StepNumber zeigen. Aber ich will active_step ändern, wenn jeder Klick nächste & Schaltflächen zurück.

// app.js

import React, {Component} from 'react' 
import StepList from '../containers/step-list' 
import ActiveStep from '../containers/active-step' 
import Footer from './footer' 
import {connect} from 'react-redux' 

class App extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      whichStep: 0 
     } 
     this.handleBackStep = this.handleBackStep.bind(this) 
     this.handleNextStep = this.handleNextStep.bind(this) 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState({ 
      whichStep: nextProps.step.stepNumber 
     }) 
    } 

    render() { 
     return (
      <div className="container"> 
       <StepList /> 
       <ActiveStep whichStep={this.state.whichStep}/> 
       <Footer 
        whichStep={this.state.whichStep} 
        onBackClick={this.handleBackStep} 
        onNextClick={this.handleNextStep} /> 
      </div> 
     ) 
    } 

    handleBackStep() { 
     console.log('clicked back') 
     const whichStep = this.state.whichStep 
     this.setState({ 
      whichStep: whichStep - 1 
     }) 
    } 

    handleNextStep() { 
     console.log('clicked next') 
     const whichStep = this.state.whichStep 
     this.setState({ 
      whichStep: whichStep + 1 
     }) 
    } 
} 

function mapStateToProps(state) { 
    return { 
     step: state.activeStep 
    } 
} 

export default connect(mapStateToProps)(App) 

//

Ich hoffe, dass ich es richtig erklärt. Entschuldigung für meine schlechte Sprache.

Answer 1

Also, korrigieren Sie mich, wenn ich falsch liege, aber Sie möchten den Zustand mit dem Reduzierer active_step aktualisieren.

Um dies zu erreichen, können Sie den selectStep Aktions-Anruf von step-list.js zu app.js verschieben.

So wird dies step-list.js

import React, {Component} from 'react' 
import {connect} from 'react-redux' 
import {bindActionCreators} from 'redux' 
import {selectStep} from '../actions/index' 

class StepList extends Component { 
    render() { 
     const renderSteps = this.props.steps.map((item, index) => { 
      return (
        <li 
         key={item.stepNumber} 
         onClick={() => { 
           this.props.selectStep(item) 
          } 
         } 
         className="step-group-item"> 
         {item.title} 
        </li> 
       ) 
      } 
     ) 

     return (
      <ul className="step-group"> 
       {renderSteps} 
      </ul> 
     ) 
    } 
} 

export default StepList 

sein und diese app.js

import React, {Component} from 'react' 
import StepList from '../containers/step-list' 
import ActiveStep from '../containers/active-step' 
import Footer from './footer' 
import {connect} from 'react-redux' 

class App extends Component { 
    constructor(props) { 
     super(props) 
     this.state = { 
      whichStep: 0 
     } 
     this.handleBackStep = this.handleBackStep.bind(this) 
     this.handleNextStep = this.handleNextStep.bind(this) 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState({ 
      whichStep: nextProps.step.stepNumber 
     }) 
    } 

    render() { 
     return (
      <div className="container"> 
       <StepList 
        steps={this.props.steps} 
        selectStep={this.props.selectStep} 
       /> 
       <ActiveStep whichStep={this.props.activeStep}/> 
       <Footer 
        whichStep={this.props.activeStep} 
        onBackClick={this.handleBackStep} 
        onNextClick={this.handleNextStep} /> 
      </div> 
     ) 
    } 

    handleBackStep() { 
     console.log('clicked back') 
     const activeStep = this.props.activeStep 
     this.props.selectStep(activeStep - 1); 
    } 

    handleNextStep() { 
     console.log('clicked next') 
     const activeStep = this.props.activeStep; 
     this.props.selectStep(activeStep + 1); 
    } 
} 

function mapStateToProps(state) { 
    return { 
     activeStep: state.activeStep, 
     steps: state.steps 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({selectStep: selectStep}, dispatch) 
} 


export default connect(mapStateToProps, mapDispatchToProps)(App) 

Auf diese Weise werden Sie die selectStep Aktion immer an der gleichen Stelle tun