如何访问来自深部组件的REDX变量和函数

问题描述：

比方说，我的应用程序有这个成分结构：

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

我需要终极版，因为该应用程序将会变得更大和更深的使用，所以我就开始通过建立操作，减速和动作类型的React-Select组件。我还在App.js文件中设置了mapStateToProps。

现在我需要知道如何将存储在redux中的数据传递给其他组件（例如React-Select）以及如何使用我声明的操作对其进行编辑。

这是我index.js文件

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

这是我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);

这是我ProfilationStep.js文件

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

这是我ProfilationStep1.js文件

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

这是我减速

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

这是我actiontypes文件

export const CHANGE_VALUE ='profilationSelect/CHANGE_VALUE';

，最后，这是我的个行动文件

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

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

感谢您的帮助

答

你肯定是在正确的道路。

解决方案很简单：你将你的状态绑定到反应道具上。使用道具，你可以做任何你喜欢的事情（例如，让他们做出反应选择）。如果你想修改它，你必须映射“mapDispatchToProps”，在这里你映射函数，执行你的动作到道具。这种工作方式相同“mapStateTopProps”：App.js的

末（导入你的行为在上面的文件，名为“profilationSelectActions”在这里）：

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

现在的功能“updateJobValue”是可用你的app.js的道具您现在可以轻松地将它传递给您的组件和on-change事件的反应选择：

在您的ProfilationStep1中。JS改变这一行：

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

对此（你传递的功能updateJobValue下来以后）

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

之后，updateJobType应该上去App.js一路，然后派遣行动。之后，应用程序将重新渲染新的步骤。

非常感谢，这对我有用！ – Wakko

如何访问来自深部组件的REDX变量和函数

相关推荐