做网站要学那些东西,wordpress后台升级,沈阳网站制作培训,oa系统办公软件排名React 基础巩固(三十一)——Redux
一、Redux是个纯函数
概念
纯函数#xff08;确定的输入一定产生确定的输出#xff0c;函数在执行过程中不产生副作用#xff09;#xff1a;
在程序设计中#xff0c;若一个函数符合以下条件#xff0c;那么这个函数就被称为纯函数…React 基础巩固(三十一)——Redux
一、Redux是个纯函数
概念
纯函数确定的输入一定产生确定的输出函数在执行过程中不产生副作用
在程序设计中若一个函数符合以下条件那么这个函数就被称为纯函数此函数在相同的输入值时需产生相同的输出函数的输出和输入值以外的其他隐藏信息或状态无关也和由I/O设备产生的外部输出无关函数不能有语义上可观察的函数副作用诸如“触发事件”使输出设备输出或更改输出值以外物件的内容 副作用本身是医学概念在计算机科学中表示在执行一个函数时除了返回函数值外还对调用函数产生了附加的影响。例如修改了全局变量修改参数或改变外部的存储。 作用
可以放心的编写和使用保证函数的纯度只需关心相应的业务逻辑无需关心传入的内容是如何获得的或者依赖其他的外部变量是否已经发生了修改确定输入内容不会被任意篡改有确定的输入有确定的输出。
二、为什么需要Redux
面临的问题
状态多JS开发的应用程序越来越复杂需要管理的状态越来越多这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等也包括一些UI的状态比如某些元素是否被选中是否显示加载动效当前分页管理难管理不断变化的state是非常困难的状态之间相互存在依赖一个状态的变化会引起另一个状态的变化View页面也有可能会引起状态的变化。随着应用程序越来越复杂state的变化变得难以控制和追踪靠自己React是在视图层帮助我们解决了DOM的渲染过程但是State依然留给我们自己来管理。无论是组件定义的state组件之间的通信还是通过Context进行的数据共享这些维护的工作最终由我们自己来决定而非React。
Redux的出现能帮助我们管理StateRedux是JS的状态容器提供了可预测的状态管理Redux除了和React配合使用外也可以和Vue等其他界面库一起使用。
三、Redux的核心理念 Store 定义统一的规范来存储数据 const initialState {books: [{name:book1, price: 35},{name:book2, price: 35},{name:book3, price: 35},{name:book4, price: 35}]
}action Redux要求必须通过action来更新数据。action是一个普通JS对象用来描述此次更新的type和content所有数据的变化必须通过派发action来更新。 const action1 { type: ADD_BOOK, info:{ name:book5, price:99}}
const action2 { type: INC_PRICE, index: 0}
const action3 { type: CHANGE_NAME, playload:{ index: 1, newName:book666}}reducer reducer是一个纯函数将传入的state和action结合起来生成一个新的state。
store/index.js
const { createStore } require(redux);// 初始化数据
const initialState {name: test,title: hello redux,
};// 定义reducer函数纯函数
// 两个参数
// 1.store中上一次的值
// 2.本次需要更新的action
// 返回值它的返回值会作为sto re之后存储的state
function reducer(state initialState, action) {console.log(reducer:, state, action);// 有新数据进行更新的时候那么返回一个新的stateif (action.type change_name) {return {...state,name: action.name,};} // 若没有新数据更新返回之前的statereturn state;
}// 创建的store
const store createStore(reducer);module.exports store;
test.js
const store require(./store);console.log(store.getState());// 使用action修改store中的数据
const nameAction {type: change_name,name: change name test,
};
store.dispatch(nameAction);console.log(store.getState());const nameAction2 {type: change_name,name: change name test111,
};
store.dispatch(nameAction2);console.log(store.getState());
