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

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

首先,我們捋一捋思路:

  • 假設我們現在有兩個頁面:登錄頁面Auth.js 和 應用內頁Dashboard.js
  • 入口的index.js文件就要寫入兩個頁面的路由渲染模板;
  • Auth.js為第一個頁面,在頁面中判斷用戶是否登錄,已登錄,直接RedirectDashboard.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/dashboardhttp://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.jsreducer也放進去呢,這就需要用到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!

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

推薦閱讀更多精彩內容