Comment accéder aux variables et fonctions redux à partir de composants profonds

Question

Je suis un peu confus à propos de l'implémentation redux.

Disons que mon application a cette structure de composants:

-App 
--ProfilationStep 
---ProfilationStep1 
----React-Select (http://jedwatson.github.io/react-select/) 

je dois utiliser Redux parce que l'application va grandir et plus profond, alors j'ai commencé par la mise en place Actions, détendeurs et types d'action pour la Réagir-Sélectionner le composant. J'ai également mis le mapStateToProps dans le fichier App.js.

Maintenant j'ai besoin de savoir comment passer/accéder aux données stockées en redux à d'autres composants (React-Select par exemple) et comment les éditer avec les actions que j'ai déclarées.

Ceci est mon index.js fichier

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore } from 'redux'; 
import ProfilationSelectReducer from './components/reducers/profilationSelect'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 

const store = createStore(
    ProfilationSelectReducer 
    ); 

ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider>, document.getElementById('root')); 
registerServiceWorker(); 

Ceci est mon app.js

import React, { Component } from 'react'; 
import PropTypes from 'prop-types' 
import { bindActionCreators} from 'redux' 
import Profilation from './components/Profilation' 
import ProfilationStep from './components/Profilation/ProfilationStep' 

import { connect } from 'react-redux'; 
import * as SelectActionCreators from './components/actions/profilationSelect' 
import 'react-select/dist/react-select.css'; 

class App extends Component { 
    static propTypes = { 
    steps: PropTypes.array.isRequired 
    }; 

    render() { 

    console.log(this.props) 
    const { dispatch, steps } = this.props; 
    const changeValue= bindActionCreators(SelectActionCreators.changeValue, dispatch); 

    const stepComponents = this.props.steps.map((step, index) => (
     <ProfilationStep 
     key={index} 
     index={index} 
     step={step} 
     /> 
    )); 

    return (
     <div className="repower-app"> 

     { stepComponents } 
     </div> 
    ); 
    } 
} 

const mapStateToProps = state => ({ 
    steps:state.steps 
}); 

export default connect(mapStateToProps)(App); 

Ceci est mon ProfilationStep.js fichier

import React, { Component } from 'react'; 
import PropTypes from 'prop-types' 
import ProfilationStep1 from './ProfilationStep1' 
import ProfilationStep2 from './ProfilationStep2' 
import ProfilationStep3 from './ProfilationStep3' 
import ProfilationStep4 from './ProfilationStep4' 
import ProfilationStep5 from './ProfilationStep5' 


const ProfilationStep = props => 

<div className='ProfilationStep'> 
    {props.index===0 && 
     <ProfilationStep1 
      step={props.step} 
     /> 
    } 
    {props.stepIndex===2 && 
     <ProfilationStep2 
     handleSelect={props.handleSelect} 
     handleInput={props.handleInput} 
     expend={props.expend} 
     period={props.period} 
     light={props.light} 
     gas={props.gas} 
     /> 
    } 
    {props.stepIndex===3 && 
     <ProfilationStep3 
     handleSelect={props.handleSelect} 
     environment={props.environment} 
     /> 
    } 

    {props.stepIndex===4 && 
     <ProfilationStep4 
      flexibility={props.flexibility} 
      handleSelect={props.handleSelect} 
     /> 
    } 
    {props.stepIndex===5 && 
     <ProfilationStep5 
      customize={props.customize} 
      handleSelect={props.handleSelect} 
     /> 
    } 

</div> 

export default ProfilationStep 

Ceci est mon ProfilationStep1.js fichier

import React, { Component } from 'react'; 
import Select from 'react-select'; 
import PropTypes from 'prop-types' 

var jobOptions = [ 
    { value: 'edilizia', label: 'Edilizia' }, 
    { value: 'editoria', label: 'Editoria' }, 
    { value: 'educazione', label: 'Educazione' } 
]; 



const ProfilationStep1 = props => 

<div className='ProfilationStep'> 
    La mia attivit&agrave; si occupa di <Select 
        name="job" 
        value={props.step.job} 
        onChange={e => props.changeValue(e.target.value)} 
        options={jobOptions} 
        />  

</div> 

ProfilationStep1.propTypes = { 

    //isComplete: PropTypes.bool.isRequired, 
    //isActive: PropTypes.bool.isRequired 
    job: PropTypes.string.isRequired, 
    service: PropTypes.string.isRequired, 
    handleSelect: PropTypes.func.isRequired 
} 

export default ProfilationStep1 

Ceci est mon réducteur

import * as ProfilationSelectActionTypes from '../actiontypes/profilationSelect'; 

const initialState = { 


    steps: [{ 
     job: "", 
     service: "" 
    }], 
} 

export default function ProfilationSelectReducer (state=initialState, action){ 
    switch(action.type){ 
     case ProfilationSelectActionTypes.CHANGE_VALUE: 
     return { 
      ...state, 
      steps:[{ 
       job: action.value 
      }] 

     }; 
     default: 
     return state; 
    } 
} 

Ceci est mon actiontypes fichier

export const CHANGE_VALUE ='profilationSelect/CHANGE_VALUE'; 

et, enfin, cette est mon actions fichier

import * as ProfilationSelectActionTypes from '../actiontypes/profilationSelect'; 

export const changeValue = value =>{ 
    return{ 
     type: ProfilationSelectActionTypes.CHANGE_VALUE, 
     value 
    } 
} 

Merci pour toute aide

Answer 1

Vous êtes certainement sur la bonne voie.

La solution est simple: vous liez votre état aux accessoires de réaction. Avec les accessoires, vous pouvez faire ce que vous voulez (par exemple, les passer à réagir-sélectionner). Si vous voulez le modifier, vous devez mapper "mapDispatchToProps", où vous mappez des fonctions qui exécutent vos actions sur les accessoires. Cela fonctionne de la même façon que « mapStateTopProps »:

Fin de app.js (importer vos fichier d'actions sur le dessus, nommées « profilationSelectActions » ici):

const mapStateToProps = state => ({ 
    steps:state.steps 
}); 

const mapDispatchToProps = dispatch => ({ 
    updateJobValue: (value) => dispatch(profilationSelectActions.changeValue(value)) 
} 

// Also add here mapDispatchToProps 
export default connect(mapStateToProps, mapDispatchToProps)(App); 

Maintenant, la fonction « updateJobValue » est disponible dans le les accessoires de votre app.js. Vous pouvez maintenant le transmettre facilement à vos composants et à l'événement onChange de react-select:

Dans votre ProfilageÉtape1.js modifier cette ligne:

onChange={e => props.changeValue(e.target.value)} 

Pour ce (après avoir passé la fonction updateJobValue vers le bas)

onChange{e => props.updateJobType(e.target.value)} 

Après cela, updateJobType devrait aller tout le chemin jusqu'à app.js puis envoyer l'action. Après cela, l'application sera rendue avec les nouvelles étapes.