redux+react-redux+redux中间件实现工程化开发

最新推荐文章于 2024-05-30 10:54:15 发布

欣欣子~~~

最新推荐文章于 2024-05-30 10:54:15 发布

阅读量88

点赞数

文章标签： react.js 中间件前端

本文链接：https://blog.csdn.net/qq_46392591/article/details/132450370

版权

简介：

redux 是一个用于管理应用程序状态的 JavaScript 库。它是可预测的状态容器，适用于各种 JavaScript 应用程序，包括 React 应用程序。Redux 的核心原则是单一数据源和状态只读。它通过将应用程序的状态存储在一个称为"Store"的中央对象中，并使用纯函数来修改状态，来实现应用程序的可预测性和可维护性。Redux 的主要概念包括：

Action（动作）：是一个描述发生事件的简单对象，它必须包含一个 type 字段来表示动作的类型。根据需要，还可以包含其他自定义字段来传递数据。
Reducer（归约器）：是一个纯函数，接收当前的状态和动作作为参数，并返回一个新的状态。它负责根据不同的动作类型来更新状态。
Store（存储）：是一个保存应用程序状态的对象。它提供了一些方法，如 getState() 用于获取当前状态，dispatch(action) 用于分发动作以触发状态更新，subscribe(listener) 用于注册监听状态变化的回调函数。
React-Redux 是将 Redux 和 React 结合使用的官方库。它提供了一些辅助函数和组件，使得在 React 应用程序中使用 Redux 更加方便。React-Redux 提供了两个核心组件：
Provider 组件：是 React-Redux 库的根组件，它接收一个 Redux 的 Store 对象作为 prop，并将该 Store 对象传递给组件树中的所有其他组件。这样就可以在整个应用程序中访问到 Redux 的状态。
Connect 高阶组件：是用于连接 Redux 的状态和组件的函数。通过将 Connect 应用于组件，可以通过定义一个映射函数来选择并注入所需的状态和动作到组件的 prop 中。这样组件就能够直接访问 Redux 的状态并触发相应的动作。
React-Redux 提供了一种更方便的方式来在 React 应用程序中管理共享状态。它简化了 Redux 的使用，并提供了一种优雅的方式来处理组件与状态的交互。

目录结构

-store                      //总文件夹
	index.js                //store根文件,存储全局状态
	action-types.js         //储存统一状态标识
	--reducer               //reducer文件夹  
		index.js            //reducer集合文件
		xxxReducer.js ..... //修改单个状态的文件
	--action                // action文件夹
		index.js            //action集合文件
		xxxAction.js  ....  //修改单个的函数

1.创建store文件，新建index.js文件，下载redux

npm i redux -D  //redux下载

import { createStore } from "redux"  //在redux中引入创建容器
import reducer from "./reducers"     //在reducer集合文件中引入
const store = createStore(reducer)   //创建全局状态管理
export default store

2.创建reducer文件夹，新建index.js文件(reducer文件集合)和单个的xxxReducer.js文件

xxxReducer.js文件中

import * as TYPE from "../action-types"  //引入统一状态的标识
const initial = {   //初始化数值
    supNum: 10,
    oppNum: 5,
}
//初始化赋值进入，return的值即为新的返回值，传入的action即为dispatch派发的信息
export default function voteReducer(state = initial, action) { 
    state = JSON.parse(JSON.stringify(state)) //深拷贝一下，这里是粗略写一下
    if (action.type === TYPE.VOTE_SUP) {  //此处的TYPE.VOTE_SUP在下边提及
        state.supNum++
    }
    if (action.type === TYPE.VOTE_OPP) {
        state.oppNum++
    }
    return state
}

reducers文件夹中index.js文件中

import { combineReducers } from "redux" //引入redux中的combineReducers
import voteReducer from "./voteReducer"   //引入各个reducer文件
import personReducer from "./personReducer"
//将所有的reducer文件的值重命名，通过combineReducers放入一起
const reducer = combineReducers({    
    vote: voteReducer,   //此处的名字即为store.getState().xxx的名字
    person: personReducer  
})
export default reducer

3.创建actions文件夹，主要是封装dispatch派发的方法集合

新建xxxAction对于派发的行为对象管理(本来是store.dispatch({type:xxx},state:{a:xxx})),转换成store.dispatch(action.xxx()),其实是更加规范化，各个集合放在一起

import * as TYPE from "../action-types"  //将统一规范引入
const voteAction = {   //创建方法集合
    support() {
        return {
            type: TYPE.VOTE_SUP   //type属性:引入的统一标识对应第2项的
        }
    },
    oppose() {
        return {
            type: TYPE.VOTE_OPP
        }
    }
}

export default voteAction

actions文件夹的作用是将各个模块的方法集合起来(就是集合起来，不多解释)

// 把各个板块的action合成一个action即可
import voteAction from "./voteAction"
import personAction from "./personAction"
const action = {
    vote: voteAction,
    person: personAction
}
export default action

4.action-types.js，创建统一需要派发的标识

创建此文件的作用是因为redux每次在修改全局状态的时候，会通过dispatch({type:xxx})中的type属性来查找需要修改的值，所以type属性多的时候，就会出现名字重复而报错，将此属性统一进行管理可以防止type的重复命名。这个文件用在xxxAction中对于派发项目的调用，在xxxReducer.js文件中对于管理标识辨别。

// 统一管理需要派发的标识
/*
    为了保证不冲突，我们一般这样命名，模块名_派发标识[大写]
    变量和存储的值是统一的
    所有的需要派发的行为标识都在这里定义
*/
export const VOTE_SUP = "VOTE_SUP"
export const VOTE_OPP = "VOTE_OPP"
export const PERSON_SUP = "PERSON_SUP"
export const PERSON_INFO = "PERSON_INFO"

5.下载react-redux，在根文件中引入react-redux，创建上下文

npm i react-redux -D  //下载react-redux

在根文件中使用react-redux，中结构出Provider创建上下文(类似于useContext)，传入store属性，因为redux的弊端：每次需要在store.subcribe()中传入动态函数，这样每次操作都麻烦

import React from 'react';
import Vote from "./View/Vote"
import store from './store';  //引入store文件夹
import { Provider } from "react-redux"  //在react-redux结构Provider创建上下文
export default function App() {
    return (
        <Provider
            store={
                store
            }
        >
            <Vote />
        </Provider>
    )
}

6.使用redux中的状态信息(原store.getState())

在react-redux中结构出connect在组件的导出时使用，结构为connect(mapStateToProps,mapDispatchToProps)(导出的组件)
第一个参数的用法:mapStateToProps

export default connect(mapStateToProps,mapDispatchToProps)(我们要渲染的组件)
mapStateProps 可以获取redux中的公共状态，把需要的信息作为属性传给组件
写法:connect(state=>{
	return{
		supNum:state.vote.supNum,
		oppNum:state.vote.oppNum
	}
})(Vote)
简写:
export default connect(state => {
    return state.vote   //此处的形参是state指代的是store.getState()
})(Vote)

以下是一个显示出来supNum，oppNum的信息

import React from 'react';
import VoteFooter from "./VoteFooter"
import { connect } from 'react-redux'; //结构出connect
const Vote = (props) => {  //props可以拿到下方的state.vote
    let { supNum, oppNum } = props
    return (
        <div>
            <h1>react真好玩</h1>
            <span>{supNum + oppNum}</span>
            <div>
                <div>支持人数:{supNum}</div>
                <div>反对人数:{oppNum}</div>
            </div>
            <VoteFooter />
        </div >
    )
}
export default connect(state => {
    return state.vote  //此处的形参是state.vote指代的是store.getState().vote
})(Vote)

7.派发redux全局状态信息(原store.dispatch)

第二个参数的用法:mapDispatchToProps,主要是对于事件的派发

export default connect(mapStateToProps,mapDispatchToProps)(我们要渲染的组件)
mapStateProps 可以获取redux中的公共状态，把需要的信息作为属性传给组件
引入工程化中引入的action文件这样可以进行事件的派发
写法:connect(null，dispatch => {  //此处的形参dispatch即为store.dispatch
    return {  
        support() { 
            dispatch(action.vote.support())//执行函数返回
			//此处等同于dispatch({type:TYPE.VOTE_SUP})
        },
        oppose() { 
            dispatch(action.vote.oppose())
        }
    }
})(VoteFooter)
简写:export default connect(null, action.vote)(VoteFooter)
//此处简写是因为 react-redux中结构出自带的bindActionCreator，转换成上方的结构，
此处的action.vote是一个对象 ===> 等效于
{                                    //利用bindActionCreator传入对象
    support() {                      //对于方法进行重构
        return {                     //dispatch({type:xxx})
            type: TYPE.VOTE_SUP      //dispatch(action.vote.support())
        }
    },                      =======>  
    oppose() {
        return {
            type: TYPE.VOTE_OPP
        }
    }
}
//此处自带的bindActionCreator，会进行自动转化

对于事件的派发行为:

import React from 'react';
import { connect } from 'react-redux'; //引入connect
import action from "../store/actions/index"
const VoteFooter = (props) => {  //此处的props可以接收到dispatch函数
    let { support, oppose } = props
    return (
        <div>
            <button onClick={support}>支持</button>  //调用函数
            <button onClick={oppose}>反对</button>
        </div>
    )
}
export default connect(null, action.vote)(VoteFooter)

总结

1.把reducer/状态按照模块进行划分和管理，把所有模块的reducer划分为一个即可。
2.每一次任务派发，都会把所有的reducer，依次去执行，派发的时候传递的行为对象(行为标识)是统一的，各个模块之间派发的行为标识的唯一性====>派发行为的宏管理(actions-types.js文件的创建)。
3.创建actionCreator对象，按模块管理各板块的action派发行为对象。

对比

一.原redux

1.我们需要创建上下文对象，基于XXX.Provider包裹根组件，并提供上下文信息，后代组件需要基于上下文对象，获取到上下文中的store。
2.需要用到公共状态的组件
- store.getState() 获取公共状态
- store.subscribe(让组件更新的函数) 放在事件池中
3.需要派发的组件
- store.dispatch(actionCreator)

二.react-redux

1.提供Provider组件，可以在自己内部创建上下文对象，把store放在组件的上下文中
2.提供connect函数，在函数内部，可以获取上下文的store，然后快速把公共状态，以及需要派发的操作，基于属性传递给组件。
- connect(mapStateToProps，mapDispatchToProps)(渲染的组件)
- mapDispatchToProps 中传入的对象会被bindActionCreator转化成对应的函数

redux的缺陷：

1.redux在设计上，通过getState()获取公共状态，直接和redux中的公共状态，公用相同的堆地址，这样导致是可以直接修改公共状态信息的。
2.我们会把让组件更新的办法放在事件池当中，会通知事件池中的所有方法执行，此操作，放置方法的时候，没有办法设置状态的依赖，不论哪个状态被修改，事件池中的所有方法都要执行(相关组件都要进行更新)。
- 优化：我们在向事件池中加入方法的时候，把依赖项信息也设置了，在每一次执行reducer修改状态之前，把之前的状态存储一份(prev)，修改后的最新状态也获取到(next)。
- 通知事件池中方法执行的时候，拿出来的某个方法时候会执行，就可以prev和next中，此方法依赖的状态是否改变。但是react-router会让很多组件释放掉，只展示房前模块的组件(SPA)，这样即便组件更新的方法执行，但是也不会产生太大的影响，(而且我们可以在组件释放的时候，把对应更新的方法，从事件池中移除)。
1. 所有的reducer的合并，其实不是代码的合并，而是创建一个总的reducer，每一次派发，都是让总的reducer执行，在这里会把每个模块的reducer都完整执行一次(即便中间已经发现匹配的逻辑，也会把其他模块执行)。
- 优化：在某个模块的reducer中，如果派发的行为标识有匹配了(因为统一行为标识管理的，所以遇到匹配的，说明后面不可能再次匹配了，应该停止后续的reducer)。【比较新旧数据，不同即停止循环】

redux 中间件

使用redux中间件实现另外的功能，常用的中间件有redux-logger，redux-thunk等等(先下载 npm i xxx -D)

redux中间件的使用

1.引用applyMiddleware，中间件

//在redux中applyMiddleware可以对于组件进行挂在
import { createStore, applyMiddleware } from "redux"
import reduxLogger from "redux-logger" //派发日志
import reduxThunk from "redux-thunk"  //异步操作

2.进行挂载

const store = createStore(
    reducer,
    applyMiddleware(reduxLogger, reduxThunk) //进行挂载
)

3.使用中间件

一、redux-logger

redux-logger是在控制台打印派发前后的状态【派发前的状态，action。派发后的状态】，无需配置，直接使用

![[Pasted image 20230823114144.png]]

二、redux-thunk

redux-thunk主要是处理异步请求数据，再进行dispatch进行派发

    support() {  //中间件的固定格式
        return async (dispatch) => {
            await delay()     //不使用中间件，会报错
            dispatch({
                type: TYPE.VOTE_SUP
            })
        }
    },

在此处进行派发会执行两次dispatch，一次自动执行(什么都没修改)，一次手动(修改数据，通知reducer执行)，且第二次才会有执行的结果

![[Pasted image 20230823114457.png]]

三、redux-promise

redux-thunk主要是处理异步请求数据，再进行dispatch进行派发，方式和redux-thunk些许不同

    async oppose() {   //直接在外层进行async await 无需重构
        await delay()
        return {
            type: TYPE.VOTE_OPP
        }
    }

同时也会派发两次

![[Pasted image 20230823133038.png]]