5. redux

最新推荐文章于 2023-11-01 20:33:09 发布
最新推荐文章于 2023-11-01 20:33:09 发布
阅读量255 收藏
点赞数
分类专栏： # React 文章标签： javascript 前端 webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46025031/article/details/126071573
版权

1. redux简介

文档：https://www.redux.org.cn/

redux是一个专门用于做状态管理的JS库（不是react插件库），可以用在react、angular、vue等项目中，能够集中式管理react应用中多个组件共享的状态。

redux开发者工具：
在Google应用商店搜索 Redux DevTools


使用场景：

  • 某个组件的状态需要让其他组件随时拿到（共享）
  • 一个组件需要改变另一个组件的状态（通信）

在这里插入图片描述

1.1 action

动作的对象。

包含两个属性：

  1. type：标识属性，值为字符串，唯一，必要属性
  2. data：数据属性，值为任意类型，可选属性
{
	type: 'ADD_PERSON',
	data: {
		name: '张三',
		age: 12
	}
}

1.2 reducer

用于初始化状态、加工状态。

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

redux的reducer函数必须是一个纯函数。

1.3 store

将state、action和reducer联系在一起的对象。


得到此对象：

  1. import {createStore} from 'index'
  2. import reducer from './reducers
  3. const store = createStore(reducer)

此对象的功能：

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

2. redux核心API

2.1 legacy_createStore()

用于创建包含指定reducer的store对象

createStore已弃用

2.2 store对象

store对象是redux库最核心的管理对象。


store对象内部维护：

  1. state
  2. reducer

核心方法：

  • getStore()
  • dispatch(action)
  • subscribe(listener)

具体编码：

  • store.getState()
  • store.dispatch({type: ‘方法’, number})
  • store.subscribe(render)

2.3 applyMiddleware()

应用上基于redux的中间件(插件库)

2.4 combineReducers()

合并多个reducer函数

3. 使用redux

想做一个求和案例：

  1. 安装redux：npm install redux

  2. 在src目录下新建redux目录，并创建store.js和count_reducer.js（转为求和服务的reducer文件）文件

在这里插入图片描述

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

// 引入legacy_createStore，用于创建redux中最为核心的store对象
import { legacy_createStore } from 'redux'
// 引入为Count组件服务的reducer
import countReducer from './count_reducer'

// 暴露store
export default legacy_createStore(countReducer)
  1. count_reducer.js 文件

初始化时，preState的值为undefined，action中的type为@@init形式的值，没有data

/**
 * 该文件用于创建一个为Count组件服务的reducer，reducer的本质就是一个函数
 * reducrt函数接收两个参数，分别为：之前的状态和动作对象
 */

// 初始化状态
const initState = 0

export default function countReducer(preState = initState, action) {
    // 从action对象中获取 type、data
    const { type, data } = action

    // 根据 type 决定如何加工数据
    switch (type) {
        case 'increment': // 加
            return preState + data
        case 'decrement': // 减
            return preState - data
        default:
            return preState
    }
}
  1. 仅使用react实现的求和组件
import React, { Component } from 'react';
import './index.css'

export default class Count extends Component {
    state = {
        count: 0
    }

    increment = () => {
        const { value } = this.selectNumber
        const { count } = this.state
        this.setState({
            count: count + value * 1
        })
    }

    decrement = () => {
        const { value } = this.selectNumber
        const { count } = this.state
        this.setState({
            count: count - value * 1
        })
    }

    incrementIfOdd = () => {
        const { value } = this.selectNumber
        const { count } = this.state
        if (count % 2 !== 0) {
            this.setState({
                count: count + value * 1
            })
        }
    }

    incrementAsync = () => {
        const { value } = this.selectNumber
        const { count } = this.state
        setTimeout(() => {
            this.setState({
                count: count + value * 1
            })
        }, 500);
    }

    render() {
        return (
            <div>
                <h1>当前求和为：{this.state.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前求和为奇数时+</button>
                <button onClick={this.incrementAsync}>异步+</button>
            </div>
        );
    }
}
  1. 改造Count组件
import React, { Component } from 'react';
import './index.css'
import store from '../../redux/store';

export default class Count extends Component {
	// 去除Count组件自身的状态
	// state = {
    //     count: 0
    // }
    
    // 可以直接在入口文件中写，当多个组件使用redux时，只需写一次就能实现状态更新时组件自动更新
    // componentDidMount() {
    //     /**
    //      * redux只负责状态管理，状态更改并不会引起组件更新
    //      * 需要监测redux中状态的变化，只要变化，就调用render
    //      */
    //     store.subscribe(() => {
    //         this.setState({})
    //     })
    // }

    increment = () => {
        const { value } = this.selectNumber
        // 通知 redux 加 value
        store.dispatch({ type: 'increment', data: value * 1 })
    }

    decrement = () => {
        const { value } = this.selectNumber
        store.dispatch({ type: 'decrement', data: value * 1 })
    }

    incrementIfOdd = () => {
        const { value } = this.selectNumber
        const count = store.getState()
        if (count % 2 !== 0) {
            store.dispatch({ type: 'increment', data: value * 1 })
        }
    }

    incrementAsync = () => {
        const { value } = this.selectNumber
        setTimeout(() => {
            store.dispatch({ type: 'increment', data: 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>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前求和为奇数时+</button>
                <button onClick={this.incrementAsync}>异步+</button>
            </div>
        );
    }
}
  1. 在入口文件中实现更新组件状态

在这里插入图片描述

  1. 新建count_action.js
export const createIncrementAction = data => ({ type: 'increment', data })
export const createDecrementAction = data => ({ type: 'decrement', data })
  1. 对Count组件进行改造

在这里插入图片描述

4. 异步action

action的值可以是一般对象Object（同步） 或 函数function（异步）。

redux默认是不能进行异步处理的，但某些时候应用中需要在redux中执行异步任务(ajax, 定时器)。


例子：将组件中的异步任务交到action中去实现：

  1. store默认action必须是一个Object类型的一般对象，所以需要通过一个中间件来使用异步action

    可以使用异步中间件：npm install --save redux-thunk

  2. 在store.js中引入异步中间件

在这里插入图片描述

  1. 开启异步任务

在这里插入图片描述
在这里插入图片描述

不过此时这个函数已经是store帮忙调用的，可以不用引入store

异步action中一般都会调用同步action

在这里插入图片描述

5. react-redux

react-redux是一个react插件库，专门用来简化react应用中使用redux。

5.1 react-redux中的组件分类

  1. UI组件
    • 只负责 UI 的呈现，不带有任何业务逻辑
    • 通过props接收数据(一般数据和函数)
    • 不使用任何 Redux 的 API
    • 一般保存在components文件夹下
  2. 容器组件
    • 负责管理数据和业务逻辑，不负责UI的呈现
    • 使用 Redux 的 API
    • 一般保存在containers文件夹下

UI组件都会被容器组件包裹，由容器组件与redux打交道，且容器组件可以随意使用redux的API，而UI组件中则不能使用任何redux的API。


容器组件给UI组件传：（都通过props传递）

  • redux中所保存的状态
  • 用于操作状态的方法

在这里插入图片描述

5.2 相关API

  1. Provider：让所有组件都可以得到state数据

  2. connect：用于包装 UI 组件生成容器组件

  3. mapStateToprops：将外部的数据（即state对象）转换为UI组件的标签属性

  4. mapDispatchToProps：将分发action的函数转换为UI组件的标签属性

使用：

  1. 改造Count组件，将store相关内容清除，使其称为一个合法的UI组件
import React, { Component } from 'react'
import './index.css'

export default class Count extends Component {
    increment = () => {
        const { value } = this.selectNumber
    }

    decrement = () => {
        const { value } = this.selectNumber
    }

    incrementIfOdd = () => {
        const { value } = this.selectNumber
    }

    incrementAsync = () => {
        const { value } = this.selectNumber
    }

    render() {
        return (
            <div>
                <h1>当前求和为：?</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前求和为奇数时+</button>
                <button onClick={this.incrementAsync}>异步+</button>
            </div>
        );
    }
}
  1. 为Count准备容器组件：src -> containers -> Count -> index.jsx
  2. 实现容器组件，需要借助 react-redux：npm i react-redux
/**
 * 容器组件作为UI组件和redux的桥梁，需要将两者引入
 */
// 引入Count的UI组件
import CountUI from '../../components/Count'
import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction
} from '../../redux/count_action'

// 引入connect用于连接UI组件和redux
import { connect } from 'react-redux'

/**
 * mapStateToProps函数返回一个对象
 *      返回的对象中的key就作为传递给了UI组件props的key
 *      返回的对象中的value就作为传递给了UI组件props的value
 * 用于传递状态
 */
// function mapStateToProps(state) {
//     return { count: state }
// }
const mapStateToProps = (state) => ({ count: state })

/**
 * mapDispatchToProps函数返回一个对象
 *      返回的对象中的key就作为传递给了UI组件props的key
 *      返回的对象中的value就作为传递给了UI组件props的value
 * 用于传递操作状态的方法
 */
// function mapDispatchToProps(dispatch) {
//     return {
//         add: (data) => {
//             // 通知redux执行加法
//             dispatch(createIncrementAction(data))
//         },
//         des: (data) => {
//             // 通知redux执行减法
//             dispatch(createDecrementAction(data))
//         },
//         addAsync: (data, time) => {
//             // 异步加
//             dispatch(createIncrementAsyncAction(data, time))
//         }
//     }
const mapDispatchToProps = (dispatch) => ({
    add: (data) => {
        // 通知redux执行加法
        dispatch(createIncrementAction(data))
    },
    des: (data) => {
        // 通知redux执行减法
        dispatch(createDecrementAction(data))
    },
    addAsync: (data, time) => {
        // 异步加
        dispatch(createIncrementAsyncAction(data, time))
    }
})
}

// 使用connent创建并暴露Count的容器组件
export default connect(mapStateToProps, mapDispatchToProps)(CountUI)
  1. 此时在App.js中不能引入Count的UI组件，而要引入Count的容器组件，并引入store

在这里插入图片描述

  1. 在UI容器中使用this.props接收
import React, { Component } from 'react'
import './index.css'

export default class Count extends Component {
    increment = () => {
        const { value } = this.selectNumber
        this.props.add(value * 1)
    }

    decrement = () => {
        const { value } = this.selectNumber
        this.props.des(value * 1)
    }

    incrementIfOdd = () => {
        const { value } = this.selectNumber
        if (this.props.count % 2 !== 0) {
            this.props.add(value * 1)
        }
    }

    incrementAsync = () => {
        const { value } = this.selectNumber
        this.props.addAsync(value * 1, 500)
    }

    render() {
        // console.log(this.props);
        return (
            <div>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前求和为奇数时+</button>
                <button onClick={this.incrementAsync}>异步+</button>
            </div>
        );
    }
}

  1. mapDispatchToProps可以简写，因为react-redux做了自动分发
    在这里插入图片描述

  2. index.js文件中不再需要监测redux状态发生改变，容器组件中已经默认拥有监测redux状态发生改变的能力

// 检测redux中状态改变，若redux状态发生改变，则重新渲染App组件
// store.subscribe(() => {
//     ReactDOM.render(<App />, document.getElementById('root'))
// })
  1. 不在App.jsx文件中为容器组件一个个传递store，可以在index.js中将所有容器组件都需要store交给Provider，Provider会自动分析应用里面所有的容器组件，把store传给每一个需要store的容器组件

在这里插入图片描述
在这里插入图片描述

  1. 可以将容器组件和UI组件整合
import React, { Component } from 'react'
import '../../components/Count/index'

import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction
} from '../../redux/count_action'
// 引入connect用于连接UI组件和redux
import { connect } from 'react-redux'


// 定义UI组件
class Count extends Component {
    increment = () => {
        const { value } = this.selectNumber
        this.props.add(value * 1)
    }

    decrement = () => {
        const { value } = this.selectNumber
        this.props.des(value * 1)
    }

    incrementIfOdd = () => {
        const { value } = this.selectNumber
        if (this.props.count % 2 !== 0) {
            this.props.add(value * 1)
        }
    }

    incrementAsync = () => {
        const { value } = this.selectNumber
        this.props.addAsync(value * 1, 500)
    }

    render() {
        // console.log(this.props);
        return (
            <div>
                <h1>当前求和为：{this.props.count}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <button onClick={this.incrementIfOdd}>当前求和为奇数时+</button>
                <button onClick={this.incrementAsync}>异步+</button>
            </div>
        );
    }
}

// 使用connent创建并暴露Count的容器组件
export default connect((state) => ({ count: state }), {
    add: createIncrementAction,
    des: createDecrementAction,
    addAsync: createIncrementAsyncAction
})(Count)
友人A ㅤ
关注
专栏目录
react-redux-modal-flex:[已弃用]使用Redux简化模式弹出式窗口
04-29
[不推荐使用] REACT-REDUX-MODAL-FLEX 使用Redux轻松制作模态/弹出窗口。 :warning: 这仅适用于React 16.3+ :warning: 如果您正在寻找React 16.2的版本（针对单个页面），请使用分支。 演示版 特征 React灵敏 通过轻松自定义animation效果 安装 要安装稳定版本，可以使用： $ yarn add react-redux-modal-flex 例子 步骤1： rootReducer.js import { combineReducers } from "redux" ; import { reducer as modal } from "react-redux-modal-flex" ; import todos from "./todos" ; export default combineReducers ( { todos
Developing.a.Redux.Edge.B01KL5RJHU
08-29
Chapter 5. Syncing Data with the Server Chapter 6. Showing Request State to Users Chapter 7. Persisting State on Client Chapter 8. Analytics Middleware Chapter 9. Best Practices Chapter 10. Going ...
@reduxjs/toolkit配置react-redux解决createStore或将在未来被淘汰警告
weixin_45966674的博客
11-01 604
这个应该大家都知道 最好不要用已经被明确未来或弃用的语法 因为一旦弃用这个系统就需要维护 而且说 一般会被淘汰的语法 本身也就是有一定缺陷存在的。然后 我们在src目录下创建一个目录 叫 redux 在这个目录下创建一个store.js。这里 我们定义了一个全局变量cont 然后 编写了修改这个全局变量的函数 setCont。要用我这种方式redux react-redux的依赖肯定是要有的。然后 store来源于我们自己写的 redux/store。然后 我们在需要用的组件中这样写。
【React 框架】redux / react-redux
qq_30148319的博客
07-11 1257
（1）redux 是一个专门用于做状态管理的 JS 库 ( 不是 react 插件库 )。 （2）它可以用在 react、angular、vue等项目中, 但基本与 react 配合使用。 （3）作用：集中式管理 react 应用中多个组件共享的状态。 （1）某个组件的状态，需要让其他组件可以随时拿到（共享）。 （2）一个组件需要改变另一个组件的状态（通信）。 （3）总体原则：能不用就不用，如果不用比较吃力才考虑使用。 2、redux
Redux中 combineReducers的使用
Clover ‘s Blog
10-14 813
Redux中 combineReducers的使用
redux
pauline_的博客
07-03 626
redux的三个核心概念 action 1.动作的对象 2.包含2个属性 type:标识属性 , 值为字符串 , 唯一 , 必要sh
开始开发：1.react 2.react-dom 3.babel 4.webpack 5.prop类型6.redux 7.react-redux 8.react-router-dom 9.react-transition-group 10 .bootstrap 11.react-bootstrap 12.axios
02-19
起步发展 1.react 2.react-dom 3.babel 4.webpack 5.prop-types 6.redux 7.react-redux 8.react-router-dom 9.react-transition-group 10.bootstrap 11.react-bootstrap 12 .axios
next-redux-wrapper：Next.js的Redux包装器
02-05
如果需要使用Next.js 6-9，则可以使用该库的3-5版本，请参见。 否则，请考虑升级Next.js。 :warning: 内容： 动机 为静态应用程序设置Redux非常简单：必须创建一个Redux存储，该存储提供给所有页面。 但是，当...
VirtualKD-Redux-2020.5.7z
02-01
虚拟机远程调试
第5章、react-redux基本知识
最新发布
04-15
合并reducer
React中使用Redux的不同写法
qq_28745941的博客
07-31 4292
今天来记录一下，在React中使用Redux的不同写法，从最开始的不依赖react-redux插件，到妥协（bushi），直到现在使用@reduxjs/toolkit插件进行编写，了解插件到底为我们做了什么（他真的，我哭死o(╥﹏╥)o）。 第一种，纯redux 创建store /** * 目前createStore已经弃用，所以我们要引用legacy_createStore  * compose：用来合成函数，在同时配置applyMiddleware、d
【Redux】的封装以及使用（6）
weixin_49174517的博客
11-23 386
市面上有redux- saga ， redux-thunk，redux-thunk相比于redux-saga ，体积小，灵活，但需要自己手动抽取和封装。导入 applyMiddleware、compose 方法将仓库数据、reduxTools、reduxThunk 进行关联。执行回调中传递的参数，根据 tyep 标记去匹配需要执行的方法。让 redux 调式工具兼容异步。方法传递一个执行异步的回调。## 一、 基本配置。
Redux框架之combineReducers() 用法讲解
江咏之
07-15 1108
combineReducers() 随着应用变得复杂，需要对 reducer 函数 进行拆分，拆分后的每一块独立负责管理 state 的一部分。 combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用 createStore。 合并后的 reducer 可以调用各个子 reducer，并把它们的结果合并成一个 state 对象。state 对象的结构由传入的多个
React笔记 combineReducers函数
weixin_46831501的博客
11-29 630
在React中，我们当有大量数据需要管理我们理所应当的想到使用redux来管理我们的数据。但是一个项目中肯定是不只有一个reducer的，而很可能每个页面都有一个自己的reducer，而怎么将这些子reducer整合到一个reducer中呢。这个时候就需要用到 combineReducers 函数了。 使用方法很简单，只需要将子reducer导入，并且从redux-immutable库中引入combineReducers函数，combineReducers函数接收一个对象，这个对象就是子reducer以及它
3.3 reducer拆分-combineReducers的使用
weixin_45660035的博客
09-10 237
1.简介 对于一个大型的应用，将所有的更新逻辑都放入到单个 reducer 函数中都将会让程序变得不可维护。一般来讲，函数应该比较短，并且只做一件特定的事。因此，把很长的，同时负责很多事的代码拆分成容易理解的小片段是一个很好的编程方式。 基于 Redux 的应用程序中最常见的 state 结构是一个简单的 JavaScript 对象，它最外层的每个 key 中拥有特定域的数据。类似地，给这种 state 结构写 reducer 的方式是分拆成多个 reducer，拆分之后的 reducer 都是相同的结构（
React学习-Redux
Bunny的博客
06-14 159
这样定义为了防止后续变量名更改等。
【React】redux中引入createStore有删除线
m0_63779088的博客
08-04 4489
解决方法*2
从零开始React-01(redux相关)
characs的博客
04-22 202
从零开始React-01（redux相关）
combineReducers()用法详解
七月
12-07 232
https://www.cnblogs.com/aurora-ql/p/14110920.html
怎么更新redux.min.js文件
04-05
更新redux.min.js文件需要以下步骤： 1. 找到最新的redux.min.js文件，可以在Redux...5. 测试您的应用程序，确保更新后的redux.min.js文件没有引入任何错误或问题。如果您发现任何问题，请查看控制台输出并解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值