Question

我有一个主要的js文件，让我们说：

import React from 'react';
import ReactDOM from 'react-dom';

import {Provider}  from 'react-redux';
import {store}  from './store.js';
import {App} from './app.js'

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

我的App.js看起来像这样：

import React from 'react';
import { connect } from 'react-redux';
import { Proba } from './proba.js'

export class App extends React.Component
{
    constructor()
    {
        super();
    }

    render()
    {
        return (<div><button>Success</button><Proba /></div>);
    }
}

function mapStateToProps(store)
{
    return {
        a: 'ok'
    };
}

function mapDispatchToProps(dispatch)
{
    return {};
}

export default connect(mapStateToProps, mapDispatchToProps)(App)

如何从Proba组件到达商店？我可以在应用程序中获取它，但不知道如何将其传递给它的孩子。

我尝试了以下但是没有工作，我的proba.js中仍然有一个空对象：

import React from 'react'
import { connect } from 'react-redux';

export class Proba extends React.Component
{
    constructor(props)
    {
        super(props);
        console.log(this.props);
    }


    render()
    {
        return <p>{this.props.a}</p>;
    }
}

function anotherMapStateToProps(store)
{
    return {
        a: 'ok'
    };
}

function anoterMapDispatchToProps(dispatch)
{
    return {};
}

export default connect(anotherMapStateToProps, anoterMapDispatchToProps)(Proba)

Answer 1

与App的方式相同。 connect()它并选择您希望作为道具传递到组件中的商店的值。

export default connect(anotherMapStateToProps, anoterMapDispatchToProps)(Proba)

React redux提供者大孩子

1 个答案: