我要评论redux核心
1. 上节课内容总结
- react-router
2. 课程目标
- 掌握 redux 三大原则
- 掌握 redux 基本应用
- 掌握 react-redux 使用
- 掌握 react-thunk 使用
3. redux概念
- Redux 是一个独立的JavaScript 状态管理库， 非React内容之一
- 链接: https://www.redux.org.cn/.
4. 课程内容
4.1 为什么使用Redux
- Redux 本身是 MVVM渐进式框架，
M(数据模型) - V(视图) - VM(虚拟模型)
4.2 核心概念
理解Redux 几个核心概念与它们之间的关系
- state ：存储当前页面自身数据；只读 (所以修改需要用到reducer)
- reducer：管理数据，类似仓库管理员，统一存储所有数据
- store ：仓库，存所有state
- action：修改state的新的状态
(1). state对象
通常我们会把应用中的 数据存储 到一个对象树中进行统一管理，我们把这个位置称为： state
- state 是只读的：
这里需要注意的是，为了保证数据状态的可维护性和测试，不推荐直接修改state中的原数据
- 需要通过纯函数修改 state
* 纯函数
a. 什么是纯函数？纯函数 – 函数式编程的一种概念：
- 相同的输入永远返回相同的输出
- 不修改函数的输入值
- 不依赖外部环境状态
- 无任何副作用 (例如：异步请求以及定时器造成的问题)
b. 使用纯函数的好处：
- 便于测试
- 有利于重构
(2). action对象
-
我们对state 的修改是通过reducer 纯函数来进行的，同时通过传入的 action 来执行具体的操作
-
action 是一个对象
-
type 属性： 表示要进行操作的动作类型， 增删改查。。。。
-
payload属性： 操作 state 的同时传入的数据
-
但是这里需要注意的是，我们不直接去调用Reducer函数,而是通过Store对象提供的dispatch方法来调用
(3). Store对象 (负责存储的仓库)
- 为了对 steta, reducer, action,进行统一的管理和维护，我们需要创建一个Store对象(仓库)
4.3 redux 三大原则
-
单一数据源： 整个应用的state 被储存在一棵 obeject tree中，并且这个object tree 只存在于 唯一的store 中
-
State 是只读的，唯一改变state的方法就是触发 action，action是一个用于描述已发生事件的普通对象
-
使用纯函数来进行修改
4.4 redux 基本应用
1). 安装
npm i redux
2). 引入
import { createStore } from 'redux'
3). 创建一个仓库，在仓库中对状态进行管理，参数为一个纯函数
let store = createStore(reducer);
4). reducer 纯函数
-
因为 state 是只读的，所以需要一个纯函数去修改内部的值
-
reducer 代表仓库管理员
-
state 后面可以加默认值，也可以不加
-
reducer 也是我们自己起的名字，符合见名知意即可
-
格式：
function reducer(state=默认值,action){ return state; } 参数1：state 的初始值，可以是外界传进来的值，也可以是默认值 参数2：action -- 修改值
function reducer(state={
name:"电影院",
age:20
},action){
return state;
}
let store = createStore(reducer); //传函数体进去，不是传函数调用
console.log(store);
在控制台输出仓库，可以看到一个对象，其中包含几个方法：
方法1. getState 获取状态
getState: ƒ getState() -- 获取状态
代码示例：
console.log(store.getState());
浏览器输出：
方法2. dispatch 修改
dispatch: ƒ dispatch(action) -- 发起一次修改 （同步方法，立即执行！！！）
action:{
type:"做了什么修改" -- 必填！下面修改时注意相应的type与这里对应准确~
}
代码示例：
(1). 修改1次后
import React from 'react';
import {createStore} from 'redux'
function reducer(state={
name:"电影院",
age:20
},action){
switch(action.type){
case 'edit_name':
return{
...state,
name:action.name
}
}
return state;
}
let store = createStore(reducer); //传函数体进去，不是传函数调用
store.dispatch({
type:"edit_name",
name:"游泳馆"
});
console.log(store.getState()); //获取状态
function App() {
return (
<div>哈哈</div>
);
}
export default App;
浏览器输出：
(2). 修改2次后
import React from 'react';
import {createStore} from 'redux'
function reducer(state={
name:"电影院",
age:20
},action){
switch(action.type){
case 'edit_name':
return{
...state,
name:action.name
}
case 'edit_age':
return{
...state,
age:action.age
}
}
return state;
}
let store = createStore(reducer); //传函数体进去，不是传函数调用
store.dispatch({
type:"edit_name",
name:"游泳馆"
});
store.dispatch({
type:"edit_age",
age:21
});
console.log(store.getState()); //获取状态
...
浏览器输出：
(3). 修改3次后，且有一次新增（所有对数据的操作都用dispatch，包括修改、新增）
已有的属性，覆盖；没有的去新增创建新的属性
function reducer(state={
name:"电影院",
age:20
},action){
switch(action.type){
case 'edit_name':
return{
...state,
name:action.name
}
case 'edit_age':
return{
...state,
age:action.age
}
case 'edit_time':
return{
...state,
time:action.time
}
}
return state;
}
let store = createStore(reducer); //传函数体进去，不是传函数调用
store.dispatch({
type:"edit_name",
name:"游泳馆"
});
store.dispatch({
type:"edit_age",
age:21
});
store.dispatch({
type:"edit_time",
time:"待定"
});
console.log(store.getState()); //获取状态
...
浏览器输出：
方法3. subscribe 监听状态
state发送改变时触发
- 参数是： 触发时执行的回调函数
subscribe: ƒ subscribe(listener) -- 监听状态的修改
代码示例：
import React from 'react';
import {createStore} from 'redux'
function reducer(state={
name:"电影院",
age:20
},action){
switch(action.type){
case 'edit_name':
return{
...state,
name:action.name
}
case 'edit_age':
return{
...state,
age:action.age
}
case 'edit_time':
return{
...state,
time:action.time
}
}
return state;
}
let store = createStore(reducer);
// subscribe -- 监听状态的修改
// state发送改变时触发 参数是： 触发时执行的回调函数
store.subscribe(()=>{
console.log(store.getState());
});
store.dispatch({
type:"edit_name",
name:"游泳馆"
});
store.dispatch({
type:"edit_age",
age:21
});
store.dispatch({
type:"edit_time",
time:"待定"
});
// console.log(store.getState()); //获取状态
function App() {
return (
<div>哈哈</div>
);
}
export default App;
浏览器输出：
方法4. replaceReducer
replaceReducer: ƒ replaceReducer(nextReducer) -- 替换掉 reducer
5. reducer 优化合并
接下一篇博客：React-5.2 Redux – combineReducers优化合并reducer
本文地址：https://blog.csdn.net/CSDN_GMC/article/details/107468272
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论