React全家桶+Material-ui構建的後臺管理系統

1、簡介

一個使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui構建的後來管理中心。

2、 附錄
+ 1. [在線體驗](https://simpleroom.github.io)：帳號:<code>admin</code>密碼:<code>123456</code>
+ 2. [源碼地址：https://github.com/SimpleRoom/walker-admin](https://github.com/SimpleRoom/walker-admin)，以爲有用請戳：star~ 會不斷更新......
+ 3. 默認使用: [create-react-app](https://github.com/facebook/create-react-app)
+ 4. 目前分5個頁面：圖表數據，我的資料，員工管理，會員管理，線路設計，酒店預訂

3、 工具歸納

+ 一、[redux](https://redux.js.org/)：管理組件state的容器
+ 二、[react-redux](https://react-redux.js.org/)：React官方控制React組件與Redux的鏈接容器
+ 三、[redux-actions](https://redux-actions.js.org/)：簡化Redux寫法的工具
+ 四、[redux-saga](https://redux-saga.js.org/)：Redux處理異步數據的中間件
+ 五、[reselect](https://github.com/reduxjs/reselect)：Redux的選擇器工具，精確獲取指定state，減小沒必要要的渲染
+ 六、[plop](https://plopjs.com/)：快速開發工具，自動生成指定模板文件的工具

4、功能概況

+ 一、路由權限匹配，可在登陸時接口返回該帳號權限級別，把routerList注入store
+ 二、異步獲取github開放的我的信息接口，redux和redux-saga和redux-actions以及reselect是如何串聯一塊兒的。對應目錄(src/store/modules/common)

// 1.redux-actions
import { createActions } from 'redux-actions'
export const {
  // 獲取github我的信息
  fetchGitInfo,
  setGithubInfo,
} = createActions(
  {
    // 獲取github我的信息
    FETCH_GIT_INFO: (username) => ({ username }),
    SET_GITHUB_INFO: (githubData) => ({ githubData}),
  },
)
export default {}

//2.redux-saga
import axios from 'axios'
import { fork, put, takeEvery } from 'redux-saga/effects'
import {
  // github 我的信息
  fetchGitInfo,
  setGithubInfo,
} from './action'
// 請求github
function* getGithubInfo(action) {
  const { username } = action.payload
  // username爲你的github 用戶名
  const result = yield axios.get(`https://api.github.com/users/${username}`)
  // console.log(action, result, 'saga.....')
  yield put(setGithubInfo(result.data))
}
// 
function* watchCommon() {
  // 請求接口
  yield takeEvery(fetchGitInfo, getGithubInfo)
}
export default [fork(watchCommon)]

//3.reducer
import { handleActions } from 'redux-actions'
import {
  // 暫存github信息
  setGithubInfo,
} from './action'
// 該store的命名空間，可建立多個把store分開管理 
export const namespace = 'common'
export const defaultState = {
  // github我的信息
  githubInfo: {},
}
export const commonReducer = handleActions(
  {
    [setGithubInfo]: (state, action) => {
      const { githubData } = action.payload
      return { ...state, githubData }
    }
  },
  defaultState
)

// 4.reselect
// 從store單獨獲取githubInfo,實際中可能有N多個接口的不一樣數據
export const getGithubData = state => state[namespace].githubData || {}

// 五、組件內部使用
import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { fetchGitInfo } from '../../store/modules/common/action'
import { getGithubData } from '../../store/modules/common/selector'

const mapStateToProps = state => ({
  myGithubInfo: getGithubData(state),
})
const mapDispatchToProps = {
  fetchGitInfo,
}

const MyInfo = (props) => {
  const { myGithubInfo, fetchGitInfo } = props
  // react-hooks新增：可代替componentDidMount和componentDidUpdate
  useEffect(() => {
    if (myGithubInfo && !Object.keys(myGithubInfo).length) {
    // 觸發action,開始請求接口
      fetchGitInfo('wjf444128852')
    }
  }, [myGithubInfo, fetchGitInfo])
  return (
    <div>
      <p>{myGithubInfo.name}</p>
      <p>{myGithubInfo.flowers}</p>
    </div>
  )
}

export default connect(mapStateToProps, mapDispatchToProps)(MyInfo)

　　

 

+ 三、員工管理和會員管理頁面中選擇了[Material-table](https://material-table.com/)，內置搜索功能，可編輯，增長，刪除。須要配置中文顯示，配置參考(componenst/MaterialTable)

五、 目錄結構

```shell

plop── 快速建立components和store的模板

          ┌── assets 資源文件

          ├── components 頁面組件
          ├── router 路由配置
          ├── store state模塊管理中心
src──├── styles 頁面樣式
          ├
          ├── utils 插件和工具
          ├
          ├── views 與路由對應的頁面
          └── index.js 頁面配置入口


                        ┌── Card 面板組件
                        ├── CustomButtons 按鈕組件
                        ├── CustomInput 輸入框組件
                        ├── CustomTabs 公用Tab切換組件
components ──├── Dialog 彈框組件
                        ├── Footer 底部footer
                        ├── Grid 柵格組件
                        ├── HeadNavBar 頭部導航組件
                        ├── HotelCard 酒店頁面UI面板
                        ├── HotelList 酒店頁面列表UI組件
                        ├── Login 登陸組件
                        ├── MaterialTable 定製可編輯Table組件
                        ├── MuiDatepicker 日期選擇器組件
                        ├── MuiTimepicker 時間選擇器組件
                        ├── Notifications 自定義提示消息組件
                        ├── Snackbar Material-ui官方消息提示組件
                        ├── Table 定製不可編輯的Table組件
                        ├── Loading loading組件
                        ├── NotFound 404組件
                        ├── ScrollToTopMount 路由切換緩動到頂部組件
                        ├── SideBar 側邊欄路由導航
                        └── SideTool 右邊工具欄組件


             ┌── modules 不一樣的state模塊
             ├ ├── account 登陸驗證state
             ├ ├── common 全局公用的state
             ├ └── theme 主題控制state
store──├
             └── indexStore.js state入口

```

6、 結語

+ 一、上述中redux的工具使用相對複雜繁瑣，且不適合react初學者！！！！
+ 一、以上只是實際開發中遇到的筆記總結，如有誤請指出。
+ 二、若是打包部署到服務器二級目錄如：www.xxx.com/admin，須要對路由添加配置
+ 三、React質量交流QQ羣: <code>530415177</code>
+ 五、[前端聯盟小組: https://github.com/jsfront](https://github.com/jsfront)