Question

我第一次在redux中使用react。

在应用的渲染中，如果我控制台日志store.getState()，我可以看到存储的数据{username: 'foo', password: 'bar'}

但是当我想获取类似store.getState().password的数据时

我得到undefined error。我正在尝试将此数据传递给我的专用路线组件为：

然后在PrivateRoute内部，我尝试检查用户是否已登录并发送至仪表板

那么，如何获取数据以传递给道具？

即使const { isLoggedIn, username } = store.getState()也不起作用，它显示

属性isLoggedIn在类型{}上不存在

顺便说一句，我知道这可能不好，但这是我的第一个React应用，因此我正在尝试学习redux

Answer 1

如果要从react应用程序调用商店，则必须使用提供程序并将商店传递给react应用，然后将商店的状态，操作和/或方法绑定到react道具，如此链接所示< / p>

连接https://react-redux.js.org/5.x/api/connect

但是如果您在普通的javascript中使用redux，那么它将正常工作。

react中的示例

第一

import { Provider } from 'react-redux'
import { store } from "store";

ReactDOM.render(
    <Provider store={store}>
      <YourReactApp/>  // e.g <Container />
    </Provider>, document.getElementById('root')
);

然后，您可以将商店中的任何内容绑定到这样的组件

 import { connect } from "react-redux";

    const mapStateToProps = (state) => {
      const { isLoggedIn, username }= state
      return {
        isLoggedIn,
  username
      };
    };

    const mapDispatchToProps = (dispatch :any) => {
        return {
          login: ()=> { 
            return dispatch(your action creator)
          }
        }
      }



    const Containter = connect(mapStateToProps,mapDispatchToProps)(AnyReactComponentYouWantToPassThisStore);

    export default Containter;

您可以像这样在页面中使用它

function AnyReactComponentYouWantToPassThisStore (props){
  return(
<div> {props.username}  </div>
)
}

然后，而不是致电<AnyReactComponentYouWantToPassThisStore />

现在使用<Container />

如何从store.getState（）获取存储的数据

1 个答案: