Redux——详解

Posted 2023-04-04 Mr.指尖舞者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Redux——详解相关的知识，希望对你有一定的参考价值。

一.初识Redux

相当于vue中的vuex

1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库)
2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用
3.作用: 集中式管理 react 应用中多个组件共享的状态

看看Redux的工作原理图

如果要进行加一操作流程如下：

值得注意的是：Reducers不仅可以进行加工状态，还可以进行初始化状态（undefinded）

二，核心概念

Store

在 redux 里面，只有一个Store，整个应用需要管理的数据都在这个Store里面。这个Store我们不能直接去改变，我们只能通过返回一个新的Store去更改它。redux提供了一个createStore来创建state

import  createStore  from 'redux'
const store = createStore(reducer)

action

这个 action 指的是视图层发起的一个操作，告诉Store 我们需要改变。比如用户点击了按钮，我们就要去请求列表，列表的数据就会变更。每个 action 必须有一个 type 属性，这表示 action 的名称，然后还可以有一个 payload 属性，这个属性可以带一些参数，用作 Store 变更：

const action = 
  type: 'ADD_ITEM',
  payload: 'new item', // 可选属性

上面这个例子就定义了一个名为ADD_ITEM的Action，它还携带了一个payload的参数。 Redux 可以用 Action Creator 批量来生成一些 Action。

Reducer

在上面我们定义了一个Action,但是Action不会自己主动发出变更操作到Store，所以这里我们需要一个叫dispatch的东西，它专门用来发出action，不过还好，这个dispatch不需要我们自己定义和实现，redux已经帮我们写好了，在redux里面，store.dispatch()是 View发出 Action 的唯一方法。

store.dispatch(
  type: 'ADD_ITEM',
  payload: 'new item', // 可选属性
)

当 dispatch 发起了一个 action 之后，会到达 reducer，那么这个 reducer 用来干什么呢？顾名思义，这个reducer就是用来计算新的store的，reducer接收两个参数：当前的state和接收到的action，然后它经过计算，会返回一个新的state。(前面我们已经说过了，不能直接更改state，必须通过返回一个新的state来进行变更。)

const reducer = function(prevState, action) 
  ...
  return newState;
;

这个 reducer 是一个纯函数。纯函数的意思是说，对于相同的输入，只会有相同的输出，不会影响外部的值，也不会被外部的值所影响。纯函数属于函数式编程的概念，如果你想了解更多纯函数的概念，请看这里

可以看到，我们在创建store的时候，我们在createStore里面传入了一个reducer参数，在这里，我们就是为了，每次store.dispatch发送一个新的action,redux都会自动调用reducer，返回新的state。

这里先看一个例子

实现一个计算功能

1.先创建一个Redux文件夹，分别创建store.js和reducers.js文件

store.js中

//引入creacteStore,专门用于创建redux中最核心的store对象
import  legacy_createStore as createStore  from "redux";
//引入为Count组件服务的reducer
import countRedux from './reducers'
const store=createStore(countRedux)
//暴露出去
export default store

reducers.js文件中

这块代码参照上面的原理图

//接收两个参数 之前的状态preState,和动作对象action
//const init=0
export default function countRedux(preState,action) 
  // 从action对象中拿出：type,data
  console.log(preState,action);
  
  const type,data=action
  // 根据传进来的type判断要进行的操作
  switch (type) 
    // 如果类型是加，用传进来之前的值+action中的值，返回出去
    case 'add1':
      return preState+data
     case 'add2':
      return preState-data
     
    default:
      //返回初始化数据
     return 0

在count.js中

store.getState()获取reducx中的返回值

store.dispatch（）向redux中发送第一个参数之前的值第二个参数值action对象

store.subscribe() 当Redux状态变化时，强制更新rendar,让页面进行渲染

import React,  Component  from 'react';
// 引入状态
import store from './redux/store.js'
class count extends Component 
   state=
   
    
    // 组件挂载时调用
    componentDidMount()
      // 当Redux状态变化时，强制更新rendar,让页面进行渲染
      store.subscribe(() => 
        this.setState()
      )
     
    
    // 加法
    add1=() => 
      const value=this.select
     store.dispatch(type:'add1',data:value*1)
    
    
    add2=() => 
       const value=this.select
      //console.log(typeof value)//string
      store.dispatch(type:'add2',data:value*1)
    
    add3=() => 
       const value=this.select
      //console.log(typeof value)//string
      const count=store.getState() 
      //string+number=string 所以要把string转number 
      if(count%2!==0) 
         store.dispatch(type:'add1',data:value*1)
     else
        alert('不符合奇数要求')
      
    
    add4=() => 
       const value=this.select
      //console.log(typeof value)//string
    
      //string+number=string 所以要把string转number 
      setInterval(()=>
       store.dispatch(type:'add1',data:value*1)
      ,2000) 
     
    
  render() 
   
    return (
      <div>
        /* 获取状态 */
        <h4>store.getState()</h4>
        <select ref=(c)=>this.select=c>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
          <option value='4'>4</option>
        </select>&nbsp;
        <button onClick=this.add1>+</button>&nbsp;
        <button onClick=this.add2>-</button>&nbsp;
        <button onClick=this.add3>当前求和为奇数再加</button>&nbsp;
        <button onClick=this.add4>异步加</button>
      </div>
    );
  


export default count;

上面代码中生命周期钩子中的强制更新可以进行优化

在index.js入口文件中进行设置

以上这种方式是简写方式，下面进行改造

观察原理图，上面那个我们忽略了action,下面我们创建action.js文件

action.js

这里实现加减操作

/**
 * 专门为Count组件生成action对象
 */
// 加  箭头函数的简写模式
export const ceactAdd1Action=data=>(type:'add1',data:data)
//减法   常规模式
export function ceactAdd2Action(data)
  return type:'add2',data:data

在count.js中进行修改

先进行导入

import ceactAdd1Action,ceactAdd2Action from './redux/action.js'

修改代码

这里省略奇数相加，和异步加

三.异步action

1.什么是异步action？

有了异步action，那肯定有同步action.一般情况我们把对象（Object）形式叫做同步action

函数（function）形式称为异步action ,我们上面的例子action传入的是一个对象，他就是同步的

举个例子：

假如去食堂吃饭，1.你等上5min对服务员说上菜（就是上面例子实现异步的方式）

2.你告诉服务员五分钟后上菜，（这就是异步action）

2.什么时候用？

当你明确延时任务不想交给自身组件，想交给action时

3.怎么用？

安装中间件配置在store中

yarn add redux-thunk

在store.js中配置

在count.js中

add4=() => 
       const value=this.select
      //console.log(typeof value)//string
    
      //string+number=string 所以要把string转number 
     
       store.dispatch(ceactAsyncAdd1Action(value*1,500))

在action.js中

返回一个函数

export const ceactAsyncAdd1Action=(data,time)=>
  // 返回函数异步action
   return () => 
     setTimeout(() => 
      store.dispatch(ceactAdd1Action(data))
     ,time)

四.react-rudex

后续会继续补充.........

React -- redux详解

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

redux理解

学习文档：

英文文档: https://redux.js.org/
中文文档: http://www.redux.org.cn/
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)

此对象的功能：

getState(): 得到state
dispatch(action): 分发action, 触发reducer调用, 产生新的state
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>
		)

以上是关于Redux——详解的主要内容，如果未能解决你的问题，请参考以下文章

彻底征服 React.js ＋ Flux + Redux

前端框架重新带你了解React.js

React-Router vs Node.js

React+Redux学习笔记：React+Redux简易开发步骤

为啥 componentDidMount 在 react.js 和 redux 中被多次调用？

使用 react-redux-firebase 消费云功能 - React JS