欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-09 23:17:38
redux核心1. 上节课内容总结2. 课程目标3. redux概念4. 课程内容4.1 为什么使用Redux4.2 核心概念(1). state对象* 纯函数(2). action对象(3). Store对象 (负责存储的仓库)4.3 redux 三大原则4.4 redux 基本应用1). 安装2). 引入3). 创建一个仓库,在仓库中对状态进行管理,参数为一个纯函数4). reducer 纯函数方法1. getState 获取状态方法2. dispatch 修改(1). 修改1次后(2). 修改2次...

1. 上节课内容总结

  • react-router

2. 课程目标

  • 掌握 redux 三大原则
  • 掌握 redux 基本应用
  • 掌握 react-redux 使用
  • 掌握 react-thunk 使用

3. redux概念

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);

在控制台输出仓库,可以看到一个对象,其中包含几个方法:
React-5.1 Redux 之 状态管理库 -- 核心api

方法1. getState 获取状态

getState: ƒ getState()   -- 获取状态

代码示例:

console.log(store.getState());

浏览器输出:
React-5.1 Redux 之 状态管理库 -- 核心api

方法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;

浏览器输出:
React-5.1 Redux 之 状态管理库 -- 核心api

(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()); //获取状态

...

浏览器输出:
React-5.1 Redux 之 状态管理库 -- 核心api

(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()); //获取状态

...

浏览器输出:
React-5.1 Redux 之 状态管理库 -- 核心api

方法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;

浏览器输出:
React-5.1 Redux 之 状态管理库 -- 核心api

方法4. replaceReducer

replaceReducer: ƒ replaceReducer(nextReducer)    -- 替换掉 reducer

5. reducer 优化合并

接下一篇博客:React-5.2 Redux – combineReducers优化合并reducer

本文地址:https://blog.csdn.net/CSDN_GMC/article/details/107468272