还原/反应。无法通过 Provider 在嵌套组件中获取 store.getState答案

【问题标题】：Redux/React. Cannot get store.getState in nested components via Provider还原/反应。无法通过 Provider 在嵌套组件中获取 store.getState
【发布时间】：2018-04-01 20:08:45
【问题描述】：

所以，我尝试了解 React/Redux 中的数据流是如何工作的，但我无法弄清楚如何在应用程序的嵌套组件中获取 store.getState()，例如在主 App 组件中。我通过Provider推送它，但是...

我做错了什么？

/* INDEX.JS */

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import TodoApp from './Reducers/TodoApp'
import App from './Components/App';
import './Styles/style.css';

const store = createStore(TodoApp);

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

/* 嵌套组件 */

import React, { Fragment } from 'react';
import VisibleTodoList from '../Containers/VisibleTodoList';
import TodoFormAdd from '../Containers/TodoFormAdd';

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

    render() {
        console.log(this.props.store.getState()); // this is not work - "undefined", why?
        return(
            <Fragment>
                <TodoFormAdd />
                <VisibleTodoList  />
            </Fragment>
        );
    }
}

export default App;

【问题讨论】：

我建议阅读 redux/react-redux 教程，尤其是关于 reducers、actions 和 connect 的教程。它不像你描述的那样工作
谢谢。我做了，但是有很多白点。这就是为什么我写在这里是为了更深入地了解 Redux。 @TheReason
您将它传递给没有的提供者。为此，您基本上必须使用 redux connect。

标签： reactjs redux react-redux

【解决方案1】：

将 react-redux 中的 Provider 组件包装在您的应用周围只是您必须对代码进行的两项修改之一，以使 Redux 工作。

组件需要使用 connect 与 redux 状态“连接”。

看看“official” example from the react-redux documentation。

在你的情况下，这看起来像这样：

import React, { Fragment } from 'react';
import VisibleTodoList from '../Containers/VisibleTodoList';
import TodoFormAdd from '../Containers/TodoFormAdd';
import { connect } from 'react-redux'

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

    render() {
        // displays the todos from the global redux stpre
        console.log(this.props.todos);
        return(
            <Fragment>
                <TodoFormAdd />
                <VisibleTodoList  />
            </Fragment>
        );
    }
}

// pick the parts of the Redux state that you want
// to use as props in your connected component
const mapStateToProps = state => ({
    todos: state.todos
});

export default connect(mapStateToProps)(App);

【讨论】：

【解决方案2】：

console.log(this.props.store.getState()); // 这不起作用 - “未定义”，为什么？

这是因为 'store' 不是 App 类的道具

如果你想在 App 中获取 store 作为道具

尝试将您的代码修改为

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

【讨论】：

Push the store throw the App 组件不是 React-Redux 模式的做法。必须是 Redux 的自然生成方式。
console.log(this.props.store.getState()); , 除非你不作为道具传递，否则App如何获取商店作为道具