一、简介
一个使用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)
如对本文有疑问， 点击进行留言回复！！
egg项目npm/cnpm出错Connect timeout
网友评论