【React.js 14】react-router4配合Redux實現多頁面應用

上一篇中，我們寫的跳轉都是寫在index.js文件中，實際項目肯定不會是這樣的，所以，這里，我們再來改寫一下案例，做成多頁面切換的，用react-router4來實現。

首先，我們捋一捋思路：

  • 假設我們現在有兩個頁面：登錄頁面Auth.js 和 應用內頁Dashboard.js；
  • 入口的index.js文件就要寫入兩個頁面的路由渲染模板；
  • 以Auth.js為第一個頁面，在頁面中判斷用戶是否登錄，已登錄，直接Redirect到Dashboard.js，沒有登錄就直接渲染當前頁面Auth.js即可
  • 對應Auth.js使用的用戶信息，登錄的交互事件，也以Redux進行管理，單獨創建一個Auth.redux.js進行管理。
  • 應用內頁Dashboard.js則是之前的案例中就寫好的組件，將其從index.js的渲染中剝離出來，單獨封裝成一個應用內頁。
  • 應用內頁Dashboard.js就包含了App.js組件，其num屬性、人員增減方法也是有一個index.redux.js文件在管理。
  • 這時候，會出現多個reducer，所以需要用combineReducer方法來用多個reducer去創建一個整體的reducer。
  • Auth.js依舊Auth.redux.js的用戶登錄信息進行渲染頁面判斷，同時，也能通過Auth.redux.js的登錄動作去實現登錄跳轉。
  • Dashboard.js則是根據Auth.redux.js的登出動作去實現登出跳轉。
思路差不多就是這樣，接下來就是動手寫代碼：

./scr路徑下創建Auth.js文件，先簡單的寫下框架，作為登錄驗證的頁面：

import React, { Component } from 'react'

class Auth extends Component {
  render(){
    return(
      <div>
        <h2>當前尚未登錄</h2>
        <p>點擊登錄</p>
      </div>
    )
  }
}

export default Auth


./scr路徑下創建Dashboard.js文件，把之前index.js文件內的移到這里，作為應用內的主頁面：

import React, { Component } from 'react'
import { Link ,Route} from 'react-router-dom'
import App from './App'

//定義兩個無狀態組件
function tecDep() {
  return <h2>技術部</h2>
}
function HRDep() {
  return <h2>人事部</h2>
}

class Dashboard extends Component {
  render(){
    return(
      <div>
        {/* 指定路由跳轉的導航 */}
        <ul>
          <li>
            <Link to='/dashboard'>總部</Link>
          </li>
          <li>
            <Link to='/dashboard/tecDep'>技術部</Link>
          </li>
          <li>
            <Link to='/dashboard/HRDep'>人事部</Link>
          </li>
        </ul>
        <Route path='/dashboard' exact component={App}></Route>
        <Route path='/dashboard/tecDep' component={tecDep}></Route>
        <Route path='/dashboard/HRDep' component={HRDep}></Route>
      </div>
    )
  }
}

export default Dashboard


修改index.js的渲染部分，因為index.js屬于入口，只要套每個功能頁面的最頂層，修改成：

//引入新創建的兩個頁面組件
import Auth from './Auth'
import Dashboard from './Dashboard'
.
.
.
//render修改一下
ReactDom.render(
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        {/* 路由的渲染模板，渲染哪個路由，就寫哪個路徑 */}
        <Route path='/login' component={Auth}></Route>
        <Route path='/dashboard' component={Dashboard}></Route>
        <Redirect to='/HRDep'></Redirect>
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
)

到這一步，我們手動在瀏覽器地址欄輸入http://localhost:3000/dashboard和http://localhost:3000/login就能看到頁面了。接下來開始處理數據的操作以及事件的執行。


針對Auth.js的用戶信息和登錄事件，都用react-redux來處理，在./src目錄下創建Auth.redux.js文件：

//管理登錄驗證相關的信息和事件
const LOGIN = 'login'
const LOGOUT = 'logout'

export function authReducer(state = {isAuth:false,userName:'Mike'},action){
  switch (action.type) {
    case LOGIN:
      return {...state,isAuth:true}
    case LOGOUT:
      return {...state,isAuth:false}
    default:
      return state
  }
}

export function loginAction() {
  return {type:LOGIN}
}
export function logoutAction() {
  return {type:LOGOUT}
}


Auth.js內部要取對應的值和事件，但是，index.js里面使用的是manageCompany來創建的store，怎么把Auth.redux.js的reducer也放進去呢，這就需要用到combineReducers方法來生成一個整體，我們在./src目錄下創建Reducer.js文件：

//把引入的reducer整合成一個傳出去
import { combineReducers } from 'redux'
import { manageCompany } from './index.redux'
import { authReducer } from './Auth.redux'

export default combineReducers({manageCompany ,authReducer})

index.js中也改寫下：

import Reducers from './Reducer'
.
.
.
const store = createStore(Reducers, compose(
    applyMiddleware(thunk),
    reduxDevtools
))


有了新的store之后，就可以開始為登錄頁面Auth.js寫登錄邏輯了：

import React, { Component } from 'react'
//引入react-redux所需的庫、reducer中的登錄事件、登錄后頁面重定向的庫
import { connect } from 'react-redux'
import { loginAction } from './Auth.redux'
import { Redirect } from 'react-router-dom'
//自動連接redux
@connect(
  state=>state.authReducer,
  { loginAction }
)
class Auth extends Component {
  render(){
    return(
      <div>
        //根據用戶的狀態，判斷是否要重定向，登錄后因為會刷新渲染，也會走一次判斷
        {this.props.isAuth ? <Redirect to='/dashboard'></Redirect> : null}
        <h2>當前尚未登錄</h2>
        <p onClick={this.props.loginAction}>點擊登錄</p>
      </div>
    )
  }
}
export default Auth

但是此時會報錯：

錯誤

因為兩處connect的地方傳入的state類型無法自動對應上，這里我們就要自己動手去修改了，問題出來./scr/App.js中，把connect的地方修改為：

@connect((state)=>{
  //需要哪些狀態數據
  return {num : state.manageCompany}
} ,{ hire, hireAsync ,fire })


到此，登錄已經實現了。
Dashboard.js也要實現一個登出的功能：

//引入`connect`、`logoutAction`
import { connect } from 'react-redux'
import { logoutAction } from './Auth.redux'
.
.
.
@connect(
  state=>state.authReducer,
  { logoutAction }
)
class Dashboard extends Component {
  render(){
    const match = this.props.match
    const redirectToLogin = <Redirect to='/login'></Redirect>
    const app = (
      <div>
        {/* 指定路由跳轉的導航 */}
        <ul>
          <li>
            <Link to={`${match.url}`}>總部</Link>
          </li>
          <li>
            <Link to={`${match.url}/tecDep`}>技術部</Link>
          </li>
          <li>
            <Link to={`${match.url}/HRDep`}>人事部</Link>
          </li>
        </ul>
        <Route path={`${match.url}`} exact component={App}></Route>
        <Route path={`${match.url}/tecDep`} component={tecDep}></Route>
        <Route path={`${match.url}/HRDep`} component={HRDep}></Route>
        {this.props.isAuth ?<p onClick={this.props.logoutAction}>登出</p> : null}
      </div>
    )
    return(
      this.props.isAuth ? app :redirectToLogin
    )
  }
}

至此已經實現了頁面登錄登出的切換效果。


上代碼：
App.js

import React , { Component } from 'react'
import { connect } from 'react-redux'
import { hire, hireAsync ,fire } from './index.redux'

//狀態映射屬性
@connect((state)=>{
  //需要哪些狀態數據
  return {num : state.manageCompany}
} ,{ hire, hireAsync ,fire })
class App extends Component {
  render() {
    return (
      <div>
        <h1>公司現在有{this.props.num}人</h1>
        <p onClick={this.props.hire}>雇傭一人</p>
        <p onClick={this.props.hireAsync}>雇傭一人,晚兩天到</p>
        <p onClick={this.props.fire}>開除一人</p>
      </div>
    )
  }
}
export default App


Auth.js

//登錄驗證頁面
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { loginAction } from './Auth.redux'
import { Redirect } from 'react-router-dom'
@connect(
  state=>state.authReducer,
  { loginAction }
)
class Auth extends Component {
  render(){
    return(
      <div>
        {this.props.isAuth ? <Redirect to='/dashboard'></Redirect> : null}
        <h2>當前尚未登錄</h2>
        <p onClick={this.props.loginAction}>點擊登錄</p>
      </div>
    )
  }
}
export default Auth


Auth.redux.js

//管理登錄驗證相關的信息和事件
const LOGIN = 'login'
const LOGOUT = 'logout'

export function authReducer(state = {isAuth:false,userName:'Mike'},action){
  switch (action.type) {
    case LOGIN:
      return {...state,isAuth:true}
    case LOGOUT:
      return {...state,isAuth:false}
    default:
      return state
  }
}
export function loginAction() {
  return {type:LOGIN}
}
export function logoutAction() {
  return {type:LOGOUT}
}


Dashboard.js

import React, { Component } from 'react'
import { Link ,Route ,Redirect} from 'react-router-dom'
import App from './App'
import { connect } from 'react-redux'
import { logoutAction } from './Auth.redux'

//定義兩個無狀態組件
function tecDep() {
  return <h2>技術部</h2>
}
function HRDep() {
  return <h2>人事部</h2>
}
@connect(
  state=>state.authReducer,
  { logoutAction }
)
class Dashboard extends Component {
  render(){
    const match = this.props.match
    const redirectToLogin = <Redirect to='/login'></Redirect>
    const app = (
      <div>
        {/* 指定路由跳轉的導航 */}
        <ul>
          <li>
            <Link to={`${match.url}`}>總部</Link>
          </li>
          <li>
            <Link to={`${match.url}/tecDep`}>技術部</Link>
          </li>
          <li>
            <Link to={`${match.url}/HRDep`}>人事部</Link>
          </li>
        </ul>
        <Route path={`${match.url}`} exact component={App}></Route>
        <Route path={`${match.url}/tecDep`} component={tecDep}></Route>
        <Route path={`${match.url}/HRDep`} component={HRDep}></Route>
        {this.props.isAuth ?<p onClick={this.props.logoutAction}>登出</p> : null}
      </div>
    )
    return(
      this.props.isAuth ? app :redirectToLogin
    )
  }
}
export default Dashboard


index.js

import React from 'react'
import ReactDom from 'react-dom'
import { createStore ,applyMiddleware ,compose} from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'
import Reducers from './Reducer'
import { BrowserRouter, Route ,Redirect ,Switch} from 'react-router-dom'
import Auth from './Auth'
import Dashboard from './Dashboard'

const reduxDevtools = window.devToolsExtension ? window.devToolsExtension() : ()=>{}
// 通過reducer創建store，通過compose把幾個函數組合起來
const store = createStore(Reducers, compose(
    applyMiddleware(thunk),
    reduxDevtools
))

ReactDom.render(
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        {/* 路由的渲染模板，渲染哪個路由，就寫哪個路徑 */}
        <Route path='/login' component={Auth}></Route>
        <Route path='/dashboard' component={Dashboard}></Route>
        <Redirect to='/dashboard'></Redirect>
      </Switch>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
)


index.redux.js

// 定義成常量，盡量避免使用魔法值
const HIRE = 'hireEmployee'
const FIRE = 'fireEmployee'

// 導出并且定義reducer
export function manageCompany(total = 1, action) {
  switch (action.type) {
    case HIRE:
      return total + 1;
    case FIRE:
      return total - 1;
    default:
      return 1;
  }
}

// type為HIRE的action
export function hire() {
  return {type : HIRE}
}
// type為HIRE的異步action
export function hireAsync() {
  return dispatch=>{
    setTimeout(()=>{
      dispatch(hire())
    },2000)
  }
}
// type為FIRE的action
export function fire() {
  return {type : FIRE}
}


Reducer.js

import { combineReducers } from 'redux'
import { manageCompany } from './index.redux'
import { authReducer } from './Auth.redux'

export default combineReducers({manageCompany ,authReducer})

Done!

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容