React-5.1 Redux 之 状态管理库 -- 核心api

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. 什么是纯函数？纯函数 – 函数式编程的一种概念：

1. 相同的输入永远返回相同的输出
2. 不修改函数的输入值
3. 不依赖外部环境状态
4. 无任何副作用 (例如：异步请求以及定时器造成的问题)

b. 使用纯函数的好处：

1. 便于测试
2. 有利于重构

(2). action对象

• 我们对state 的修改是通过reducer 纯函数来进行的，同时通过传入的 action 来执行具体的操作

• action 是一个对象

• type 属性： 表示要进行操作的动作类型， 增删改查。。。。

• payload属性： 操作 state 的同时传入的数据

• 但是这里需要注意的是，我们不直接去调用Reducer函数,而是通过Store对象提供的dispatch方法来调用

(3). Store对象 (负责存储的仓库)

• 为了对 steta, reducer, action,进行统一的管理和维护，我们需要创建一个Store对象(仓库)

---

4.3 redux 三大原则

1. 单一数据源： 整个应用的state 被储存在一棵 obeject tree中，并且这个object tree 只存在于 唯一的store 中

2. State 是只读的，唯一改变state的方法就是触发 action，action是一个用于描述已发生事件的普通对象

3. 使用纯函数来进行修改

---

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