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,两者要如何去结合使用.
- 在react项目当中不使用red的时候会遇到的问题
组件与组件之间传递数据以及传递修改数据的方法变得越来越困难
在React中组件通信的数据流是单向的，顶层组件可以通过props属性向下层组件传递数据，而下层组件不能向上层组件传递数据，要实现下层组件修改数据，需要上层组件传递修改数据的方法到下层组件．当项目越来越大的时候，组件之间传递数据变得越来越困难
image.png -
使用Redux去解决React当中组件与组件之间共享数据的问题
在react项目当中加入redux的好处: 在redux应用程序当中,它要求我们要把所有的状态数据都存储在这个store对象当中,由于store这个对象它是独立于组件的,这样的话就避免了组件与组件之间传递数据,如果说哪一个组件想要获取数据,那它可以直接从这个store当中去获取,如果说哪一个组件想去修改数据，它也可以直接在store当中去修改这个数据
image.png
在React中使用Redux
下载Redux
在react项目当中,要使用Redux,我们需要去下载两个模块redux react-redux(它的作用是能够让react和redux更加完美的结合在一起).
所以我们需要在命令行工具当中输入npm install redux react-redux去下载它-
Redux工作流程(稍微变化)
工作流程.png
1.组件通过 dispatch 方法触发 Action
2. Store 接收 Action 并将 Action 分发给 Reducer
3.Reducer 根据 Action 类型对状态进行更改井将更改后的状态返回给 Store
4.组件订阅了Store中的状态，Store中的状态更新会同步到组件
Component它代表组件,Store代表状态容器就是那个store对象. 组件不能够直接去操作store里面的这个状态数据,需要去触发一个action,action触发后实际上是被store接收到.当这个store接收到这个action以后,会去调用reducer函数,并且把它接收到的这个action,传递给reducer函数,在reducer函数内部要对action的类型的不同,对store当中的这个状态进行不同的处理,处理好后,通过返回值的方式把处理好的最新的状态再返回给store已更新store里面的这个状态,当store当中的这个状态被更新完成以后,我们需要把store当中的这个状态再同步给组件
- 计数器案例
1.我们要使用create-react-app(npm install create-react-app -g)这个脚手架工具去创建一个react项目. create-react-app react-redux-guide
安装 Redux npm install redux react-redux
通过npm start这个命令去启动这个项目
处理文件结构
image.png
03. Redux 中间件
- 什么是Redux的中间件以及在工作当中会常常使用到的Redux中间件
04. 开发Redux中间件
- 如何去开发一个Redux的中间件
05. Redux综合案例
通过一个综合案例来巩固一下我们之前所学习的和reds相关的知识点
