I. Introduction
React to use a family bucket (react-router-dom, redux, redux-actions, redux-saga, reselect) + Material-ui built later management center.
II, appendix
+ 1. [online experience] (https://simpleroom.github.io): Account: <code> admin </ code > Password: <code> 123456 </ code>
+ 2. [Source Address: https : //github.com/SimpleRoom/walker-admin] (https://github.com/SimpleRoom/walker-admin), find it useful please poke: star ~ will continue to update ......
+ 3. default : [the Create-REACT-App] (https://github.com/facebook/create-react-app)
+ 4. currently divided into five pages: chart data, personal information, employee management, membership management, circuit design, hotel Booking
Third, the tools summarize
+ 1, [redux] (https://redux.js.org/ ): state management component container
+ 2, [react-redux] (https://react-redux.js.org/): React control official React container assembly connected Redux
+ 3, [redux-actions] (https://redux-actions.js.org/): writing tool simplified Redux
+ 4, [redux-saga] (https: // redux- saga.js.org/):Redux asynchronous data processing middleware
+ 5, [reselect] (https://github.com/reduxjs/reselect ): Redux selector tool, designated State obtain accurate, reducing unnecessary rendering
+ 6, [plop] (https://plopjs.com/ ): rapid development tool, the tool automatically generates the specified template file
Fourth, functional overview
+ 1, route rights matching, can interface to return to the account privilege level when you log in, the routerList injected Store
+ 2, asynchronous get github open personal information interfaces, how redux and redux-saga and redux-actions and reselect a series together . The corresponding directory (src / store / modules / common )
Actions 1.redux-//
Import createActions {} from 'Redux-Actions'
Export const {
// Get github personal information
fetchGitInfo,
setGithubInfo,
} = createActions (
{
// Get github personal information
FETCH_GIT_INFO: (username) => ( { } username),
SET_GITHUB_INFO: (githubData) => (githubData {}),
},
)
Export default {}
//2.redux-saga
Import from Axios' Axios'
Import {the fork, PUT, takeEvery} from 'Saga-Redux / Effects'
Import {
// GitHub personal information
fetchGitInfo,
setGithubInfo,
} from './action'
// request GitHub
function * getGithubInfo (Action) {
const} = {username action.payload
// github username your username
const the yield axios.get Result = ( `` https://api.github.com/users/$ {username})
// the console.log ( Action, Result, 'Saga .....')
the yield PUT (setGithubInfo (result.data))
}
//
function watchCommon * () {
// request interface
the yield takeEvery (fetchGitInfo, getGithubInfo)
}
Export default [the fork (watchCommon )]
//3.reducer
Import handleActions {} from 'Redux-Actions'
Import {
// temporary github information
setGithubInfo,
} './action' from
// store the namespace can be created to store a plurality of separate management
namespace = const Export 'Common'
Export const = {defaultState
/ / github personal information
githubInfo: {},
}
= const commonReducer handleActions Export (
{
[setGithubInfo]: (State, Action) => {
const} = {githubData action.payload
return {... State, githubData}
}
},
defaultState
)
// 4.reselect
// store from acquired separately githubInfo, in practice there may be a plurality of N different data interfaces
Export getGithubData = State = const> State [namespace] .githubData || {}
//. 5, the internal components used
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, staff management and membership management page, select the [Material-table] (https://material-table.com/), built-in search function, you can edit, add, delete. Chinese display needs to be configured, with reference to the configuration (componenst / MaterialTable)
5, the directory structure
```shell
plop── quickly create and store the template components
┌── assets Resource File
├── components page components
├── router routing configuration
├── store state module management center
src──├── styles page style
├
├── utils plug-ins and tools
├
page ├── views and corresponding to the route
└── index.js page layout inlet
┌── Card panel assembly
├── CustomButtons button assembly
├── CustomInput input frame assembly
├── CustomTabs Tab common switching assembly
components ──├── Dialog box projectile assembly
├── footer bottom footer
├ ── grid grid assembly
├── HeadNavBar head navigation components
├── HotelCard hotel page UI panel
├── HotelList hotels page lists the UI components
├── Login Login assembly
├── MaterialTable custom editable Table component
├── MuiDatepicker Date selector assembly
├── MuiTimepicker time selector assembly
├── Notifications custom prompt message components
├ ── Snackbar Material-ui official message prompts components
├── Table Table customized non-editable components
├── loading loading assembly
├── NotFound 404 components
├── ScrollToTopMount routing switch to easing the roof assembly
├── sideBar sidebars route navigation
└── SideTool right of the toolbar components
┌── different modules state module
├ ├── account login authentication State
├ ├── the Common Global Public State
├ └── Theme theme control State
store──├
└── indexStore.js State Entrance
`` `
VI Conclusion
+ 1, the foregoing tools redux relatively complex and cumbersome, and not suitable for beginners react! ! ! !
+ 1, just above the actual notes encountered in the development of the summary, if wrong, please point out.
+ 2, if the packaging is deployed to a server, such as secondary directory: www.xxx.com/admin, the need to add the routing configuration
+ 3, React mass exchange QQ group: <code> 530 415 177 </ code>
+. 5, [distal Alliance Group : https://github.com/jsfront](https://github.com/jsfront)