javascript - 如何从 index.js 中的 redux 中获取数据

Question

我有 index.js从那里获取路线根 。我需要访问商店并获取变量导航登录后需要为真最初它是假的

import React from "react";
import ReactDOM from "react-dom";
import { HashRouter, Route, Switch } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import ReduxThunk from "redux-thunk";
import allReducers from "./Reducers";
import Root from "./root";

const store = createStore(allReducers, {}, applyMiddleware(ReduxThunk));
const loggedin = true;
ReactDOM.render(<Root store={store} />, document.getElementById("root"));

root.js 文件是:

import React from "react";
import PropTypes from "prop-types";
import { Provider } from "react-redux";
import { HashRouter, Route, Switch } from "react-router-dom";
import Full from "./containers/Full/";
import { connect } from "react-redux";
// Views
import Login from "./views/Pages/Login/";
import Register from "./views/Pages/Register/";
import Page404 from "./views/Pages/Page404/";
import Page500 from "./views/Pages/Page500/";

const Root = ({ store }) => (
    <Provider store={store}>
        <HashRouter>
            <Switch>
                {/* <Route
                    exact="exact"
                    path="/login"
                    name="Login Page"
                    component={Login}
                /> */}
                <Route
                    exact="exact"
                    path="/register"
                    name="Register Page"
                    component={Register}
                />
                <Route exact="exact" path="/404" name="Page 404" component={Page404} />
                <Route exact="exact" path="/500" name="Page 500" component={Page500} />
                {/* <Route path="/" name="Home" component={Full} /> */}
                <Route
                    path="/"
                    render={() =>
                        this.props.navigate ? (
                            <Route component={login} />
                        ) : (
                            <Route component={Full} />
                        )
                    }
                />
            </Switch>
        </HashRouter>
    </Provider>
);
Root.propTypes = {
    store: PropTypes.object.isRequired
};
const mapStateToProps = ({ authRed }) => {
    const { navigate } = authRed;
    console.log("navigation system ready:", navigate);
    return { navigate };
};
export default connect(mapStateToProps, {})(Root);

我的控制台登录 mapstate 到 Prop 我返回确切需要的数据但是如果我使用 this.props.navigate 就会发生错误无法读取未定义的属性“props”

有人有解决办法吗？？

Answer 1

你的根组件是一个函数式组件并且没有this关键字，你需要解构属性并使用它，只是就像你做的store

const Root = ({ store, navigate }) => (
    <Provider store={store}>
        <HashRouter>
            <Switch>
                {/* <Route
                    exact="exact"
                    path="/login"
                    name="Login Page"
                    component={Login}
                /> */}
                <Route
                    exact="exact"
                    path="/register"
                    name="Register Page"
                    component={Register}
                />
                <Route exact="exact" path="/404" name="Page 404" component={Page404} />
                <Route exact="exact" path="/500" name="Page 500" component={Page500} />
                {/* <Route path="/" name="Home" component={Full} /> */}
                <Route
                    path="/"
                    render={() =>
                        navigate ? (
                            <Route component={login} />
                        ) : (
                            <Route component={Full} />
                        )
                    }
                />
            </Switch>
        </HashRouter>
    </Provider>
);