项目目录1.安装reduxyarnaddredux2。创建商店列表项目创建商店文件夹foldercreateindex.jsindex.jsimport{createStore}from'redux';conststore=createStore();导出默认存储;3.创建reducer.jsconstdefaultState={inputValue:""}exportdefault(state=defaultState,action)=>{returnstate}reducer必须是纯函数,纯函数给定输入,固定输出,不能改变输入5、在store中如何获取reducer数据,修改//index.js如下:import{createStore}from'redux';从'./reducer'conststore=createStore(reducer)导入减速器;导出默认存储;6.组件中如何在getstoredata组件中导入store文件下的index.js。在构造函数中this.state=store.getState();7.如何改变商店数据Createactionconstaction={type:'input_action',val:val};store.dispatch(action)->store->reducer更改存储数据并返回新的状态数据8.如何使用store.subscribe(this.listener.bind(this)监视存储数据更改并刷新dom组件中的构造函数);listener(){this.setState(store.getState())};9.优化action类型,创建actionTypes.jsexportconstC用于报错HANGE_INPUT_VALUE="change_input_value";10、优化actionCreator.js,统一管理组件的actionimport{CHANGE_INPUT_VALUE}from'./actionTypes'exportconstchangeFocuse=(inputValue)=>({type:CHANGE_INPUT_VALUE,inputValue});11、优化reducer.jsimport{CHANGE_INPUT_VALUE}from'./actionTypes'constdefaultState={inputValue:""}exportdefault(state=defaultState,action)=>{switch(action.type){案例CHANGE_INPUT_VALUE:constnewState=JSON.parse(JSON.stringify(状态));newState.inputValue=action.inputValue;返回新状态;默认值:返回状态}}
