React-5.1 Redux 之 状态管理库 -- 核心api
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
上一篇: 深入理解Java中的String
下一篇: React学习-context、mobx