安裝redux和react redux

index.js 用react-redux的Provider復(fù)合組件實(shí)現(xiàn)逐層傳參，導(dǎo)入store作為要傳的參數(shù)

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import store from "./store";

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

src/store/index.js 使用redux的createStore和combineReducers，定義了reducer,傳給store

import { createStore, combineReducers } from "redux";

const initialUser = {
  isLogin: false,
  user: { name: null },
};
function loginReducer(state = { ...initialUser }, action) {
  switch (action.type) {
    case "getUserInfo":
      return { ...initialUser };
    case "loginSuccess":
      return { ...state, isLogin: true, user: { name: "xiaoming" } };
    default:
      return { ...initialUser };
  }
}
const store = createStore(
  combineReducers({
    user: loginReducer,
  }),
);

export default store;

src/pages/RouterPage.js 定義頁(yè)面和BrowserRouter,Link,Route

import React, { Component } from "react";
import {
  HashRouter,
  BrowserRouter,
  Link,
  Route,
  Switch,
} from "react-router-dom";
import HomePage from "./HomePage";
import UserPage from "./UserPage";
import PrivateRoute from "./PrivateRoute";
import LoginPage from "./LoginPage";

export default class RouterPage extends Component {
  render() {
    const id = 1235;
    return (
      <div>
        <h3>RouterPage</h3>
        <BrowserRouter>
          <Link to="/">首頁(yè)</Link>
          <Link to="/user">用戶中心</Link>
          <Link to={"/search/" + id}>搜索</Link>
          <Link to="/aaa">不知道的頁(yè)面</Link>

          <Switch>
            <Route
              exact
              path="/"
              component={HomePage}
              // children={() => <div>hah</div>}
              // render={() => <div>render</div>}
            />
            <Route exact path="/home" component={HomePage} />
            {/* <Route path="/user" component={UserPage} /> */}
            <PrivateRoute path="/user" component={UserPage} />
            <Route path="/login" component={LoginPage} />

            <Route path="/search/:id" component={Search} />

            <Route component={() => <div>404</div>} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

function Search(props) {
  console.log("props", props);
  const { id } = props.match.params;
  return (
    <div>
      Search: {id}
      <Link to="/search/detail">{id}詳情</Link>
      <Route path="/search/detail" component={Detail} />
    </div>
  );
}

function Detail(props) {
  return <div>Detail</div>;
}

src/pages/PrivateRoute.js 點(diǎn)擊用戶中心 獲取登錄狀態(tài) 由于第一次是false 所以重定向到登錄頁(yè) 如果登錄狀態(tài)是true跳轉(zhuǎn)到用戶頁(yè)

import React, { Component } from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";

class PrivateRoute extends Component {
  render() {
    const { path, component, isLogin } = this.props;
    if (isLogin) {
      return <Route path="/user" component={component} />;
    }
    return (
      <Redirect
        to={{
          pathname: "/login",
          state: { redirect: path },
        }}
      />
    );
  }
}

export default connect(state => {
  return { isLogin: state.user.isLogin };
})(PrivateRoute);

src/pages/LoginPage.js 未登錄顯示登錄頁(yè)面 點(diǎn)擊登錄 重定向跳轉(zhuǎn)到user頁(yè)

import React, { Component } from "react";
import { connect } from "react-redux";
import { Redirect } from "react-router-dom";

class LoginPage extends Component {
  render() {
    const { isLogin, login, location } = this.props;
    const { redirect = "/" } = location.state || {};
    if (isLogin) {
      return <Redirect to={redirect} />;
    }
    return (
      <div>
        <h3>LoginPage</h3>
        <button onClick={login}>login</button>
      </div>
    );
  }
}

export default connect(
  state => {
    console.log(state);
    return { isLogin: state.user.isLogin };
  },
  {
    login: () => ({ type: "loginSuccess" }),
  },
)(LoginPage);