Javascript 如何从deep组件访问redux变量和函数

我对redux的实现有点困惑

假设我的应用程序具有以下组件结构：

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

我需要使用redux，因为应用程序将变得更大、更深，所以我开始为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();

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

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

export const CHANGE_VALUE ='profilationSelect/CHANGE_VALUE';

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

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

这是我的操作类型文件

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

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

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

export const CHANGE_VALUE ='profilationSelect/CHANGE_VALUE';

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

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

最后，这是我的操作文件

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

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

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

export const CHANGE_VALUE ='profilationSelect/CHANGE_VALUE';

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

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

---

谢谢你的帮助

你肯定走对了路

解决方案很简单：将您的状态绑定到react道具。有了这些道具，你可以做任何你想做的事情（例如，将它们传递给react select）。如果你想修改它，你必须映射“mapDispatchToProps”，在这里你可以映射执行你动作的函数到道具。其工作原理与“MapStateToprops”相同：

App.js的结尾（导入顶部名为“profilationSelectActions”的操作文件）：

现在，app.js的道具中提供了函数“updateJobValue”。现在，您可以轻松地将其传递给组件和react select的onChange事件：

在ProfilationStep1.js中，更改此行：

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

对此（在向下传递函数updateJobValue之后）

之后，updateJobType应该一直到App.js，然后分派操作。之后，应用程序将使用新步骤重新渲染