React -- redux详解

Posted 2021-12-22 永远没有404

欢迎学习交流！！！
持续更新中…

文章目录

• redux理解
• • 工作流程
• redux的核心
• • redux其余核心API
  • 三大原则
• 【案例】redux求和

---

redux理解

学习文档：

1. 英文文档: https://redux.js.org/
2. 中文文档: http://www.redux.org.cn/
3. Github: https://github.com/reactjs/redux

是什么

• redux是一个专门用于做状态管理的JS库(不是react插件库)。
• 它可以用在react, angular, vue等项目中, 但基本与react配合使用。
• 作用: 可以帮助开发者做集中式状态管理，集中式管理react应用中多个组件共享的状态。
• redux是独立于所有组件存在的，把组件们需要用的公共部分交给redux，仅仅组件自用的对象和属性可以保留
• 可以理解为“状态管理师”

使用场景

• 某个组件的状态，需要让其他组件可以随时拿到（共享）。
• 一个组件需要改变另一个组件的状态（通信）。
• 总体原则：能不用就不用, 如果不用比较吃力才考虑使用（组件较多或组件之间嵌套复杂时）。

工作流程

解释：

• React Components：在组件中要“做什么”，把需要做的事情告诉Action Creators（“Action的创建者们”，）行为创建器。
• Action Creators：将需要做的事情包装成一个动作对象，可以省去，自己直接创建一个动作对象。action在redux中被称为动作对象（js中的Object一般对象），action包括type:动作类型、data:动作值。
• dispatch（分发）为一个函数，生成action动作对象后，需要一个函数将动作对象继续传递下去，否则这个动作就此终止，即deispatch将Action继续“分发”下去，交给Store
• Store：为redux的核心，可以理解为一个调用者，负责对全局的掌控。Store本身并不执行操作，也不加工状态，只是一个调用者，Action对象交给Store后不停留，会被Store交给加工者Reducers
• Reducers：为redux的实际加工者，可以有多个。Store将previousState和Action对象交给Reducers，previousState表示之前的状态，要在之前的状态上进行action操作。Reducers操作完毕后要向Store返回一个新的状态即newState
• getState()：组件通过getState()方法拿到操作后的最新的结果，state变化重新渲染组件
• 注意：状态初始化时没有previousState参数，只会在此位置传递undefined，只有在第二次及之后的加工中才会有、

---

redux的核心

redux有三个核心概念：

1、action：是动作的对象，包含2个属性

• type：标识属性, 值为字符串, 唯一, 必要属性
• data：数据属性, 值类型任意, 可选属性
• 例子： type: 'ADD_STUDENT',data:name: 'tom',age:18

---

2、reducer：用于初始化状态、加工状态。

• 加工时，根据旧的state和action， 产生新的state的纯函数。

---

3、store：将state、action、reducer联系在一起的对象，它内部维护着：state、reducer

得到此对象的方法：

• import createStore from 'redux'
• import reducer from './reducers'
• const store = createStore(reducer)

此对象的功能：

1. getState(): 得到state
2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
3. subscribe(listener): 注册监听，订阅，当产生了新的state时, 自动调用

具体编码:

store.getState()
store.dispatch(type:'INCREMENT', number)
store.subscribe(render)

---

redux其余核心API

名称	作用
createstore()	创建包含指定reducer的store对象
applyMiddleware()	应用上基于redux的中间件(插件库)
combineReducers()	合并多个reducer函数

三大原则

• 整个应用有且仅有一个 store, 其内部的 state tree 存储整个应用的 state
• state 是只读的，修改 state,只能通过派发 action，为了描述 action 如何改变 state 的，需要编写 reducer 纯函数
• 单一数据源的设计让 React 组件之间通信更加方便，也有利于状态的统一管理

---

【案例】redux求和

结果展示：

案例目录：

代码：

src–>component–>Count–>index.jsx中

import React,  Component  from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import createIncrementAction,createDecrementAction from '../../redux/count_action'

export default class Count extends Component 

	state = carName:'奔驰c63'

	/* componentDidMount()
		//检测redux中状态的变化，只要变化，就调用render
		store.subscribe(()=>
			this.setState()
		)
	 */

	//加法
	increment = ()=>
		const value = this.selectNumber
		store.dispatch(createIncrementAction(value*1))
	
	//减法
	decrement = ()=>
		const value = this.selectNumber
		store.dispatch(createDecrementAction(value*1))
	
	//奇数再加
	incrementIfOdd = ()=>
		const value = this.selectNumber
		const count = store.getState()
		if(count % 2 !== 0)
			store.dispatch(createIncrementAction(value*1))
		
	
	//异步加
	incrementAsync = ()=>
		const value = this.selectNumber
		setTimeout(()=>
			store.dispatch(createIncrementAction(value*1))
		,500)
	

	render() 
		return (
			<div>
				<h1>当前求和为：store.getState()</h1>
				<select ref=c => this.selectNumber = c>
					<option value="1">1</option>
					<option value="2">2</option>
					<option value="3">3</option>
				</select>&nbsp;
				<button onClick=this.increment>+</button>&nbsp;
				<button onClick=this.decrement>-</button>&nbsp;
				<button onClick=this.incrementIfOdd>当前求和为奇数再加</button>&nbsp;
				<button onClick=this.incrementAsync>异步加</button>&nbsp;
			</div>
		)
	

redux–>constant.js中

/* 
	该模块是用于定义action对象中type类型的常量值，目的只有一个：便于管理的同时防止程序员单词写错
*/
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

redux–>count_action.js中：

/* 
	该文件专门为Count组件生成action对象
*/
import INCREMENT,DECREMENT from './constant'

export const createIncrementAction = data => (type:INCREMENT,data)
export const createDecrementAction = data => (type:DECREMENT,data)

redux–>count_reducer.js中：

/* 
	1.该文件是用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
	2.reducer函数会接到两个参数，分别为：之前的状态(preState)，动作对象(action)
*/
import INCREMENT,DECREMENT from './constant'

const initState = 0 //初始化状态
export default function countReducer(preState=initState,action)
	// console.log(preState);
	//从action对象中获取：type、data
	const type,data = action
	//根据type决定如何加工数据
	switch (type) 
		case INCREMENT: //如果是加
			return preState + data
		case DECREMENT: //若果是减
			return preState - data
		default:
			return preState
	

redux–>store.js中：

/* 
	该文件专门用于暴露一个store对象，整个应用只有一个store对象
*/

//引入createStore，专门用于创建redux中最为核心的store对象
import createStore from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//暴露store
export default createStore(countReducer)

App.jsx中：

import React,  Component  from 'react'
import Count from './components/Count'

export default class App extends Component 
	render() 
		return (
			<div>
				<Count/>
			</div>
		)