I. Introduction

A later management center built with React router DOM, Redux, Redux actions, Redux saga, reselect + material UI.

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), please stamp: star ~ will keep updating...
+3. Default use: [create react app] (https://github.com/facebook/create-react-app)
+4. Currently, it is divided into five pages: chart data, personal data, employee management, member management, route design, hotel reservation.

III. tool summary

+1. [redux](https://redux.js.org/): container for managing component state
+2. [React Redux] (https://React-redux.js.org/): the connection container between React component and Redux is officially controlled by React.
+3. [Redux actions] (https://redux-actions.js.org/): a tool to simplify Redux writing
+4. [Redux saga] (https://redux-saga.js.org/): Redux middleware for asynchronous data processing
+5. [reselect](https://github.com/reduxjs/reselect): the selector tool of Redux, which precisely obtains the specified state and reduces unnecessary rendering.
+6. [loop] (https://plopjs.com/): a tool for rapid development and automatic generation of specified template files.

IV. function overview

+1. Route permission matching. The interface can return the permission level of the account when logging in and inject routerList into the store.
+2. Asynchronous access to github's open personal information interface, how redux and redux saga are connected in series with redux actions and reselect. Corresponding directory (src/store/modules/common)

// 1.redux-actions
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 axios from 'axios'
import { fork, put, takeEvery } from 'redux-saga/effects'
import {
  // github personal information
  fetchGitInfo,
  setGithubInfo,
} from './action'
// Request github
function* getGithubInfo(action) {
  const { username } = action.payload
  // username is your github user name
  const result = yield axios.get(`https://api.github.com/users/${username}`)
  // console.log(action, result, 'saga.....')
  yield put(setGithubInfo(result.data))
}
// 
function* watchCommon() {
  // Request interface
  yield takeEvery(fetchGitInfo, getGithubInfo)
}
export default [fork(watchCommon)]

//3.reducer
import { handleActions } from 'redux-actions'
import {
  // Staging github information
  setGithubInfo,
} from './action'
// The namespace of this store can create multiple spaces to manage the store separately 
export const namespace = 'common'
export const defaultState = {
  // github personal information
  githubInfo: {},
}
export const commonReducer = handleActions(
  {
    [setGithubInfo]: (state, action) => {
      const { githubData } = action.payload
      return { ...state, githubData }
    }
  },
  defaultState
)

// 4.reselect
// Get githubInfo from the store separately. In fact, there may be different data of more than N interfaces.
export const getGithubData = state => state[namespace].githubData || {}

// 5. Internal use of components
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 new: can replace componentDidMount and componentDidUpdate
  useEffect(() => {
    if (myGithubInfo && !Object.keys(myGithubInfo).length) {
    // Trigger action, start request interface
      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/) is selected in the employee management and member management page, with built-in search function, which can be edited, added or deleted. Need to configure Chinese display, configuration reference (componentst / materialtable)

5. Directory structure

```shell

Loop -- quickly create templates for components and store

Asset resource file

Components page components
Route configuration
Store state module management center
src - ├ -- styles page style
          ├
- utils plug-ins and tools
          ├
├├├├ - the page corresponding to views and routes
index.js page configuration entry


Card panel assembly
Custom buttons button component
Custom input input box component
Custom tabs public Tab switching component
components - ├ - Dialog box component
- footer at the bottom
Grid grid component
Head navbar head navigation component
Hotel card hotel page UI panel
Hotel list UI component
Login login component
Material Table customization editable Table components
Date picker component
Time selector component of MuiTimepicker
Notifications custom prompt message component
The official message prompt component of snackBar material UI
Table customizes non editable table components
Load loading component
Not found 404 component
Scroll to top mount route switch to the top component
SideBar routing navigation
SideTool right toolbar component


Different state modules
account login authentication state
common global public state
Theme theme control state
store──├
Index store.js state entry

```

Vi. conclusion

+1. The above redux tools are relatively complex and cumbersome to use, and are not suitable for react beginners!!!!
+1. The above is only a summary of notes encountered in the actual development. Please point out if there is any mistake.
+2. If you package and deploy to the secondary directory of the server, such as www.xxx.com/admin, you need to add configuration to the route.
+3. React quality communication QQ group: < code > 530415177 < / code >
+5. [front end alliance team: https://github.com/jsfront](https://github.com/jsfront)