React全家桶+Material-ui构建的后台管理系统.pdf

React全全家家桶桶+Material-ui构构建建的的后后台台管管理理系系统统

⼀、简介

⼀个使⽤React全家桶(react-router-dom,redux,redux-actions,redux-saga,reselect)+Material-ui构建的后来管理中⼼。

三、⼯具概括

四、功能概

+1、路由权限匹配，可在登录时接⼝返回该账号权限级别，把routerList注⼊store

+2、异步获取github开放的个⼈信息接⼝，redux和redux-saga和redux-actions以及reselect是如何串联⼀起的。对应⽬录

(src/store/modules/common)

//1.redux-actions

importcreateActions}fromredux-actions

exportconst

//获取github个⼈信息

fetchGitInfo,

setGithubInfo,

}=createActions(

//获取github个⼈信息

FETCH_GIT_INFO:(username)=(username}),

SET_GITHUB_INFO:(githubData)=(githubData}),

},

)

exportdefault}

//2.redux-saga

importaxiosfromaxios

importfork,put,takeEvery}fromredux-saga/effects

import

//github个⼈信息

fetchGitInfo,

setGithubInfo,

}from./action

//请求github

function*getGithubInfo(action)

constusername}=action.payload

//username为你的github⽤户名

constresult=yieldaxios.get(`https:///users/$username}`)

//console.log(action,result,saga)

yieldput(setGithubInfo(result.data))

}

//

function*watchCommon()

//请求接⼝

yieldtakeEvery(fetchGitInfo,getGithubInfo)

}

exportdefault[fork(watchCommon)]

//3.reducer

importhandleActions}fromredux-actions

import

//暂存github信息

setGithubInfo,

}from./action

//该store的命名空间，可创建多个把store分开管理

exportconstnamespace=common

exportconstdefaultState=

//github个⼈信息

githubInfo:},

}

exportconstcommonReducer=handleActions(

[setGithubInfo]:(state,action)=

constgithubData}=action.payload

return...state,githubData}

}

},

defaultState

)

//4.reselect

//从store单独获取githubInfo,实际中可能有N多个接⼝的不同数据

exportconstgetGithubData=state=state[namespace].githubData||}

//5、组件内部使⽤

importReact,useEffect}fromreact

importconnect}fromreact-redux

importfetchGitInfo}from../../store/modules/common