详解如何优雅地在React项目中使用Redux
前言
或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux
概念
首先我们会用到哪些框架和工具呢?
React
UI框架
Redux
状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux
react-redux
React插件,作用:方便在React项目中使用Redux
react-thunk
中间件,作用:支持异步action
目录结构
Tips:与Redux无关的目录已省略
|--src |--storeRedux目录 |--actions.js |--index.js |--reducers.js |--state.js |--components组件目录 |--Test.jsx |--App.js项目入口
准备工作
第1步:提供默认值,既然用Redux来管理数据,那么数据就一定要有默认值,所以我们将state的默认值统一放置在state.js文件
//state.js //声明默认值 //这里我们列举两个示例 //同步数据:pageTitle //异步数据:infoList(将来用异步接口获取) exportdefault{ pageTitle:'首页', infoList:[] }
第2步:创建reducer,它就是将来真正要用到的数据,我们将其统一放置在reducers.js文件
//reducers.js //工具函数,用于组织多个reducer,并返回reducer集合 import{combineReducers}from'redux' //默认值 importdefaultStatefrom'./state.js' //一个reducer就是一个函数 functionpageTitle(state=defaultState.pageTitle,action){ //不同的action有不同的处理逻辑 switch(action.type){ case'SET_PAGE_TITLE': returnaction.data default: returnstate } } functioninfoList(state=defaultState.infoList,action){ switch(action.type){ case'SET_INFO_LIST': returnaction.data default: returnstate } } //导出所有reducer exportdefaultcombineReducers({ pageTitle, infoList })
第3步:创建action,现在我们已经创建了reducer,但是还没有对应的action来操作它们,所以接下来就来编写action
//actions.js //action也是函数 exportfunctionsetPageTitle(data){ return(dispatch,getState)=>{ dispatch({type:'SET_PAGE_TITLE',data:data}) } } exportfunctionsetInfoList(data){ return(dispatch,getState)=>{ //使用fetch实现异步请求 window.fetch('/api/getInfoList',{ method:'GET', headers:{ 'Content-Type':'application/json' } }).then(res=>{ returnres.json() }).then(data=>{ let{code,data}=data if(code===0){ dispatch({type:'SET_INFO_LIST',data:data}) } }) } }
最后一步:创建store实例
//index.js //applyMiddleware:redux通过该函数来使用中间件 //createStore:用于创建store实例 import{applyMiddleware,createStore}from'redux' //中间件,作用:如果不使用该中间件,当我们dispatch一个action时,需要给dispatch函数传入action对象;但如果我们使用了这个中间件,那么就可以传入一个函数,这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用,对于异步action很有用 importthunkfrom'redux-thunk' //引入reducer importreducersfrom'./reducers.js' //创建store实例 letstore=createStore( reducers, applyMiddleware(thunk) ) exportdefaultstore
至此,我们已经完成了所有使用Redux的准备工作,接下来就在React组件中使用Redux
开始使用
首先,我们来编写应用的入口文件APP.js
importReactfrom'react' importReactDOMfrom'react-dom' //引入组件 importTestComponentfrom'./components/Test.jsx' //Provider是react-redux两个核心工具之一,作用:将store传递到每个项目中的组件中 //第二个工具是connect,稍后会作介绍 import{Provider}from'react-redux' //引入创建好的store实例 importstorefrom'@/store/index.js' //渲染DOM ReactDOM.render( ({/*将store作为prop传入,即可使应用中的所有组件使用store*/}), document.getElementById('root') )
最后是我们的组件:Test.jsx
//Test.jsx importReact,{Component}from'react' //connect方法的作用:将额外的props传递给组件,并返回新的组件,组件在该过程中不会受到影响 import{connect}from'react-redux' //引入action import{setPageTitle,setInfoList}from'../store/actions.js' classTestextendsComponent{ constructor(props){ super(props) } componentDidMount(){ let{setPageTitle,setInfoList}=this.props //触发setPageTitleaction setPageTitle('新的标题') //触发setInfoListaction setInfoList() } render(){ //从props中解构store let{pageTitle,infoList}=this.props //使用store return() } } //mapStateToProps:将state映射到组件的props中 constmapStateToProps=(state)=>{ return{ pageTitle:state.pageTitle, infoList:state.infoList } } //mapDispatchToProps:将dispatch映射到组件的props中 constmapDispatchToProps=(dispatch,ownProps)=>{ return{ setPageTitle(data){ //如果不懂这里的逻辑可查看前面对redux-thunk的介绍 dispatch(setPageTitle(data)) //执行setPageTitle会返回一个函数 //这正是redux-thunk的所用之处:异步action //上行代码相当于 /*dispatch((dispatch,getState)=>{ dispatch({type:'SET_PAGE_TITLE',data:data}) )*/ }, setInfoList(data){ dispatch(setInfoList(data)) } } } exportdefaultconnect(mapStateToProps,mapDispatchToProps)(Test){pageTitle}
{ infoList.length>0?({ infoList.map((item,index)=>{
):null }- {item.data}
}) }
Redux三大原则
1、单一数据源
整个应用的state被储存在一棵objecttree中,并且这个objecttree只存在于唯一一个store中
2、State是只读的
唯一改变state的方法就是触发action,action是一个用于描述已发生事件的普通对象
3、使用纯函数来执行修改
为了描述action如何改变statetree,你需要编写reducers
结语
以上就是在React项目中使用Redux的简单示例,文中代码可能会有编写错误,欢迎指正,同时希望本文对大家有所帮助,也希望大家多多支持毛票票。