01. Redux核心
1.1 什么是Redux
Redux是JavaScript的状态容器,可以保存很多元素的状态.提供了可预测化的状态管理.
const state = {
modelOpen: "ves" btnClicked:
"no"
btnActiveClass:
'active'
page: 5, size: 10
};
容器: 指的就是一个javascript的对象,在这个JavaScript对象当中保存了一些数据，这些数据和页面当中的dom元素的状态是一一对应的关系，
状态: 在一个web页面当中,每一个dom元素都有其自己的状态,比如说在页面当中有一个弹出框，这个弹出框有的时候呢是显示着的，有的时候呢又是隐藏着的,这个显示和隐藏就是这个弹出框的状态。再比如说在页面当中有一个按钮，这个按钮有没有被点击过呀？有或者没有就是这个按钮的状态。当我们去点击这个按钮的时候，要给这个按钮去添加一个什么样的选中的类名呢？这个类名也是这个按钮的状态。再比如说在页面当中，有一个列表数据，我们要对这个列表数据呢进行分页显示, 当前处于第几页？每页显示多少条数据呢？这呢也是这个列表的状态。这些状态最终我们都会把它抽象成数据保存在一个对象当中。
这个对象被称为状态容器
有了这个状态容器之后有什么好处呢？之前我们在操作页面当中的dom元素的时候，我们都是通过document.getelement by ID这样的方法,先选择到这个dom元素，然后再去操作他它.在有了状态容器之后呢，我们就不需要直接去页面当中查找dom，再去操作他它.我们可以直接操作这个dom元素所对应的这个状态对象就可以了,操作页面当中的dom没有操作一个对象当中的属性方面方便.当改变对象当中的某一个属性的值���, 通过框架(vue, react,angular)操作dom,把这个状态同步到dom元素当中, 使页面当中的元素发生变化
可预测化的状态管理: 在一个大型的前端项目当中,糟糕的状态管理通常是导致项目不可维护的重要因素,Redux提供了科学的状态管理,能够让状态的管理变得更加可维护,方便定位到问题出现在哪里
Redux核心概念及工作流程
工作流程
四个核心概念分别为
store: 就是存储状态的容器,它是一个javascap的对象,在redux的应用当中，它要求我们把所有的状态都存储到store
view: 就是视图指的就是HTML页面
action: 实际上就是JavaScript的对象,在这个对象当中,要有一个固定的属性,这个属性的名字叫做type,type是一个字符串,由开发人员自己去定义.action的作用是用来描述一下当前我要对store当中的状态进行怎样的操作
reducer: 是个函数,这个函数的作用就是用来向store当中存储状态以及更新store当中的状态的,就是说reducer这个函数当中返回什么,这个store当中就存储什么
redux的工作流程这四个核心概念,组合起来要怎样去使用？在redux的应用当中，所有的状态都存储到了这个store当中,作为视图它是不能够直接去操作store当中的状态的，如果说试图想要去操作store里面的状态，它必须要先去触发action,就是说我们通过action来描述当前我要对store当中的状态进行怎样的操作。这个action会被reducer接收到,在reducer这个函数的内部要对action这个对象当中的type属性值进行判断,看一下当前你要进行什么样的操作？reducer函数内部会根据这个type属性值对状态进行操作,当reducer把状态处理完成之后，它要返回处理之后的那个最新的状态来更新store当中的这个状态。当store当中的状态发生更新以后，我们要把这个最新的状态再同步给视图，这个视图要通过调用一个方法(dispath)去触发action，当store当中的状态发生更新以后, view通过调用subscribe订阅这个store当中的状态，状态发生改变时就会通知给视图让视图去更新同步状态到视图当中.
Redux�计数器案例
通过Redux实现一个计数器案例,这个案例中页面当中显示的那个零就是状态,把这个数值存储到这个store当中,当点击按钮的时候,实际上我们更改的就是store当中的状态,当store当中的状态发生更改以后,我们再把这个状态同步到视图当中,这样的话在页面当中就能够显示出最新的数值了. ,以下是代码实现流程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="plus">+</button>
<span id="count">0</span>
<button id="minus">-</button>
<!-- 当我们在页面当中通过scipt标签把redux这个js文件导入进来以后,在全局作用域下面就有了一个redux对象了 -->
<script src="redux.min.js"></script>
<script>
// 3. 存储默认状态
var initialState = {
count: 0
}
// 2. 创建 reducer 函数
function reducer (state = initialState, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1}
default:
return state;
}
}
// 1. 创建 store 对象
var store = Redux.createStore(reducer);
// 4. 定义 action
var increment = { type: 'increment' };
var decrement = { type: 'decrement' };
// 5. 获取按钮 给按钮添加点击事件
document.getElementById('plus').onclick = function () {
// 6. 触发action
store.dispatch(increment);
}
document.getElementById('minus').onclick = function () {
// 6. 触发action
store.dispatch(decrement);
}
// 7. 订阅 store
store.subscribe(() => {
// 获取store对象中存储的状态
// console.log(store.getState());
document.getElementById('count').innerHTML = store.getState().count;
})
</script>
</body>
</html>
store 这个对象当中存储了一些方法
/*~ Object
•dispatch: f y(e)
• subscribe: f h(e)
• getState: f p/)
• replaceReducer: f (e)
• Symbol (observable): f ()
*/
createStore: 函数的第二个参数所表示的就是向store这个对象当中存储的默认状态,我们可以在createStore这个方法的第二个参数这个地方写上一个对象,一般不写,可以通过reducer的state默认参数指定
reducer: 我们要在reducer这个函数当中拿到我们在createStore第二个参数所传递的对象,可以通过reducer函数的一个state参数, state参数实际上就是我们通过createStore这个方法传递的第二个参数,.
Redux核心API
//创建Store状态容器
const store = Redux. createStore (reducer);
1 创建用于处理状态的 reducer 函数
function reducer (state = initialState, action) {}
//获取状态
store.getState();
// 订阅状态
store.subscribe(function () {});
//触发Action
store.dispatch({type: 'description ... '});
createStore: createStore这个方法的作用是用来创建store这个状态容器的,它的返回值就是我们期望得到的那个存储状态的容器store,第一个参数reducer函数,这个reduce函数的作用就是向store当中存储状态的
reducer: 这个reducer函数的作用就是向store当中存储状态的,就是说reducer这个函数当中返回什么store当中就存储什么, 它有两个参数state就是向store当中存储的状态, 可以通过create store这个方法的第二个参数去指定,也可以通过函数默认参数的方式去指定.action:当我们去触发action的时候,通过store将这个action传递给reducer,reducer可以根据action对象的type属性的值的不同来对store当中的这个状态进行不同的处理,处理完后把最新的状态再返回给store已更新store当中的状态
getState: 这个方法的作用就是用来获取store这个对象当中存储的状态的
subscribe: 订阅store,当store当中的状态发生变化的时候,这个store就会执行subscribe当中我们传递的这个回调函数,我们通常使用这个方法得到store当中最新的状态
dispatch: 是用来触发action的,这个方法的第一个参数就接收一个action对象,当我们在视图当中想要去触发action的时候,我们就必须要去调用dispatch方法去触发action
02. React + Redux
- 在react当中如何去使用Redux,两者要如何去结合使用.
- 使用Redux去解决React当中组件与组件之间共享数据的问题
03. Redux 中间件
- 什么是Redux的中间件以及在工作当中会常常使用到的Redux中间件
04. 开发Redux中间件
- 如何去开发一个Redux的中间件
05. Redux综合案例
通过一个综合案例来巩固一下我们之前所学习的和reds相关的知识点
网友评论