1、簡介javascript
一個使用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個頁面:圖表數據,我的資料,員工管理,會員管理,線路設計,酒店預訂java
3、 工具歸納react
+ 一、[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/):快速開發工具,自動生成指定模板文件的工具ios
4、功能概況git
+ 一、路由權限匹配,可在登陸時接口返回該帳號權限級別,把routerList注入store
+ 二、異步獲取github開放的我的信息接口,redux和redux-saga和redux-actions以及reselect是如何串聯一塊兒的。對應目錄(src/store/modules/common)github
// 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
五、 目錄結構redux
```shellaxios
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)