一、简介
一个使用React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中心。
二、 附录
+ 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个页面:图表数据,个人资料,员工管理,会员管理,线路设计,酒店预订
三、 工具概括
+ 1、[redux](https://redux.js.org/):管理组件state的容器
+ 2、[react-redux](https://react-redux.js.org/):React官方控制React组件与Redux的连接容器
+ 3、[redux-actions](https://redux-actions.js.org/):简化Redux写法的工具
+ 4、[redux-saga](https://redux-saga.js.org/):Redux处理异步数据的中间件
+ 5、[reselect](https://github.com/reduxjs/reselect):Redux的选择器工具,精确获取指定state,减少不必要的渲染
+ 6、[plop](https://plopjs.com/):快速开发工具,自动生成指定模板文件的工具
四、功能概况
+ 1、路由权限匹配,可在登录时接口返回该账号权限级别,把routerList注入store
+ 2、异步获取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 || {}
-
- // 5、组件内部使用
- 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)
+ 3、员工管理和会员管理页面中选择了[Material-table](https://material-table.com/),内置搜索功能,可编辑,增加,删除。需要配置中文显示,配置参考(componenst/MaterialTable)
5、 目录结构
```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入口
```
六、 结语
+ 1、上述中redux的工具使用相对复杂繁琐,且不适合react初学者!!!!
+ 1、以上只是实际开发中遇到的笔记总结,若有误请指出。
+ 2、如果打包部署到服务器二级目录如:www.xxx.com/admin,需要对路由添加配置
+ 3、React质量交流QQ群: <code>530415177</code>
+ 5、[前端联盟小组: https://github.com/jsfront](https://github.com/jsfront)