Reactjs 重排/反应。无法通过提供程序获取嵌套组件中的store.getState

因此，我试图理解React/Redux中的数据流是如何工作的，但我不知道如何在应用程序的嵌套组件中获取

store.getState（）

，例如在主

app

组件中。我通过

提供者推送它

，但是

我做错了什么

/*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')
);

从“React”导入React；
从“react dom”导入react dom；
从“react redux”导入{Provider}
从“redux”导入{createStore}
从“./Reducers/TodoApp”导入TodoApp
从“./Components/App”导入应用程序；
导入“./Styles/style.css”；
const store=createStore（TodoApp）；
ReactDOM.render(
, 
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;

import React，{Fragment}来自'React'；
从“../Containers/VisibleTodoList”导入VisibleTodoList；
从“../Containers/TodoFormAdd”导入TodoFormAdd；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
console.log（this.props.store.getState（））；//这不是工作——“未定义”，为什么？
返回(
);
}
}
导出默认应用程序；

console.log（this.props.store.getState（））；//这不是工作——“未定义”，为什么

这是因为“商店”不是同类应用的道具

如果你想在应用程序中将商店作为道具

尝试修改代码以

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

ReactDOM.render(
, 
document.getElementById（'root'））
);

将react-redux中的提供者组件包装到应用程序中只是为了使redux工作而必须对代码进行的两次修改之一

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

请看下面的图片

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

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

import React，{Fragment}来自'React'；
从“../Containers/VisibleTodoList”导入VisibleTodoList；
从“../Containers/TodoFormAdd”导入TodoFormAdd；
从“react redux”导入{connect}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
//显示全局redux stpre中的TODO
console.log（this.props.todos）；
返回(
);
}
}
//选择所需的Redux状态部分
//在连接的组件中用作道具
常量mapStateToProps=状态=>({
待办事项：state.todos
});
导出默认连接（MapStateTops）（应用程序）；

我建议阅读

redux/react redux

教程，特别是关于减缩器、操作和

connect

。它不像你描述的那样有效谢谢。我做了，但是有很多白点。这就是为什么我写这篇文章是为了更深入地理解Redux@这就是您将其传递给提供商的原因。基本上，你必须使用redux connect来实现这一目的。推送应用程序组件并不是React-redux模式实现这一目的的方式。必须是Redux的自然方式才能生成.console.log（this.props.store.getState（）），除非你不以道具身份通过，否则应用程序如何以道具形式进入商店