React生态-使用redux
时间：2023-03-29 11:25:36
HTML
1、什么是reduxRedux是一个用于管理数据状态和UI状态的JavaScript应用工具。随着JavaScript单页应用（SPA）开发变得越来越复杂，JavaScript需要管理比以往更多的状态（state），而Redux降低了管理难度。(Redux支持React,Angular,jQuery甚至纯JavaScript)react-redux工作流安装reduxnpminstall--saveredux简单使用在src下新建store文件夹，并新建仓库管理文件index.jsimport{createStore,applyMiddleware,compose}from'redux'//引入createStore方法importreducerfrom"./reducer"conststore=createStore(reducer)//创建数据存储仓库exportdefaultstore//暴露并创建reducer.js文件//定义初始状态constdefaultState={inputValue:'请输入待办事项',list:['凌晨4点起床运动','中午下班游泳一小时']}exportdefault(state=defaultState,action)=>{returnstate}组件中使用的状态ImportReact,{Component}from'react';//将store引入组件importstorefrom'./store'classTodoListextendsComponent{constructor(props){super(props)#获取store中状态的值this.state=store.getState();this.clickBtn=this.clickBtn.bind(this)}render(){return(
Add
({deleteItem(index)}}>{item})}> );}deleteItem(index){console.log(index)}}exportdefaultTodoList;二、安装redux谷歌调试工具翻墙下载redux_dev_tool，在store/index文件下添加import{createStore,applyMiddleware,compose}from'redux'//引入createStore方法importreducerfrom"./reducer"//constcomposeEnhancers=//constenhancers=composeEnhancers(applyMiddleware(thunk))conststore=createStore(reducer,window.__REDUX_DEVTOOLS_复制代码EXTENSION_&&window.__REDUX_DEVTOOLS_EXTENSION_())//创建数据存储仓库，里面有调试工具，打开工具exportdefaultstore3.操作store，更改importReact,{Component}from'react';//引入storeimport从'./store'classTodoListextendsComponent{constructor(props){super(props)#获取store中state的值this.state=store.getState();this.clickBtn=this.clickBtn.bind(this)this.changeInputValue=this.changeInputValue.bind(this)#添加订阅#新版本不需要添加订阅，但是输入值变化需要使用订阅存储.subscribe(this.storeChange)this.storeChange=this.storeChange.bind(this)}render(){return(
{this.changeInputValue}value={this.state.inputValue}/>添加
<divstyle={{margin:'10px',width:'300px'}}>
({deleteItem(index)}}>{item})}> );}changeInputValue(e){//声明动作对象constaction={type:'changeInput',value:e.target.value}//调用dispatchstore.dispatch(action)}//订阅更新storeChange(){this.setState(store.getState())}//添加按钮事件clickBtn(){constaction={type:'addItem',}store.dispatch(action)}//点击删除事件deleteItem(index){constaction={type:'deleteItem',index}store.dispatch(action)}}exportdefaultTodoList;在reducer.js中执行相应类型的操作//定义初始状态constdefaultState={inputValue:'请输入待办事项',list:['凌晨4点起床，运动','中午下班游泳一个小时']}exportdefault(state=defaultState,action)=>{#reducer只能接受状态，不能改变状态if(action.type=='changeInput'){letnewState=JSON.pares(JSON.stringify(state))//深度复制状态newState.inputValue=action.valuereturnnewState}//添加事件if(action.type=='addItem'){letnewState=JSON.pares(JSON.stringify(state))//深拷贝状态newState.list.push(newState.inputValue)newState.inputValue=''//增加完成，设置为空returnnewState}//删除事件if(action.type=='deleteItem'){letnewState=JSON.pares(JSON.stringify(state))//深拷贝状态newState.list.splice(action.index,1)returnnewState}returnstate}3.redux编写技巧在store中创建一个独立的类型文件，新建一个文件actionType.js//定义常量exportconstCHANGE_INPUT='changeInput'exportconstADD_ITEM='addItem'exportconstDELETE_ITEM='deleteItem'出口利弊tGET_LIST='getList'在组件中引入actionType文件importReact,{Component}from'react';//在组件中引入storeimportstorefrom'./store'import{CHANGE_INPUT,ADD_ITEM,DELETE_ITEM,GET_LIST}from'./store/actionType'classTodoListextendsComponent{constructor(props){super(props)#获取store中state的值this.state=store.获取状态（）；this.clickBtn=this.clickBtn.bind(this)this.changeInputValue=this.changeInputValue.bind(this)#添加订阅#新版本不需要添加订阅但是输入值变化需要使用订阅store.subscribe(this.storeChange)this.storeChange=this.storeChange.bind(this)}render(){return(
{this.changeInputValue}value={this.state.inputValue}/>Add
({deleteItem(index)}}>{item})}> );}changeInputValue(e){//声明action对象#使用导入常量替换constaction={type:CHANGE_INPUT,value:e.target.value}//调用dispatchstore.dispatch(action)}//订阅更新storeChange(){this.setState(store.getState())}//添加按钮事件clickBtn(){constaction={type:ADD_ITEM,}store.dispatch(action)}//点击删除事件deleteItem(index){constaction={type:DELETE_ITEM,index}store.dispatch(action)}}exportdefaultTodoList;同样在reducer.js中importimport{CHANGE_INPUT,ADD_ITEM,DELETE_ITEM}from'./actionType'//定义初始状态constdefaultState={inputValue:'请输入待办事项',list:['4点起床amandexercise','中午下班游泳一小时']}exportdefault(state=defaultState,action)=>{#Reducer只能接受状态，不能改变状态if(action.type==CHANGE_INPUT){letnewState=JSON.pares(JSON.stringify(state))//深拷贝状态newState.inputValue=action.valuereturnnewState}//添加事件if(action.type==ADD_ITEM){letnewState=JSON.pares(JSON.stringify(state))//深拷贝状态newState.list.push(newState.inputValue)newState.inputValue=''//增加完成，设置为空returnnewState}//删除事件if(action.type==DELETE_ITEM){letnewState=JSON.pares(JSON.stringify(state))//深拷贝状态newState.list.splice(action.index,1)returnnewState}returnstate}集中动作分发在store中创建一个新的actionCreator.js文件import{CHANGE_INPUT,ADD_ITEM,DELETE_ITEM}from'./actionType'exportconstchangeInputAction=(value)=>({type:CHANGE_INPUT,value})exportconstaddItemAction=()=>({type:ADD_ITEM,})exportconstdeleteItemAction=(index)=>({type:DELETE_ITEM,index})引入actionCreator组件中的.jsimportReact,{Component}from'react';//引入storeimportstorefrom'./store'//引入actionCreator.jsimport{changeInputAction,addItemAction,deleteItemAction}from'./store/actionCreator'classTodoListextendsComponent{constructor(props){super(props)#获取store中state的值this.state=store.getState();this.clickBtn=this.clickBtn.bind(this)this.changeInputValue=this.changeInputValue.bind(this)#添加订阅#新版本不需要添加订阅，但是输入值变化需要使用订阅存储.subscribe(this.storeChange)this.storeChange=this.storeChange.bind(this)}render(){return(
{this.changeInputValue}value={this.state.inputValue}/>添加
({deleteItem(index)}}>{item})}> );}changeInputValue(e){constaction=changeInputAction(e.target.value)//调用dispatchstore.dispatch(action)}//订阅更新storeChange(){this.setState(store.getState())}//添加按钮事件clickBtn(){constaction=addItemAction()store.dispatch(action)}//点击删除事件deleteItem(index){constaction=deleteItemAction(index)store.dispatch(action)}}exportdefaultTodoList;
