React学习笔记07_redux

最新推荐文章于 2024-08-05 09:36:06 发布
最新推荐文章于 2024-08-05 09:36:06 发布
阅读量412 收藏
点赞数
分类专栏： 前端 React 文章标签： react.js javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20470063/article/details/123361025
版权

第7章：redux

7.1. redux理解

7.1.1. 学习文档

  1. 英文文档: https://redux.js.org/
  2. 中文文档: http://www.redux.org.cn/
  3. Github: https://github.com/reactjs/redux
    下载redux和开发者工具
npm install --save react-redux
npm install --save-dev redux-devtools

7.1.2. redux是什么

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

7.1.3. 什么情况下需要使用redux

  1. 某个组件的状态，需要让其他组件可以随时拿到（共享）。
  2. 一个组件需要改变另一个组件的状态（通信）。
  3. 总体原则：能不用就不用, 如果不用比较吃力才考虑使用。

7.1.4. redux工作流程

在这里插入图片描述

7.2. redux的三个核心概念

7.2.1. action

  1. 动作的对象
  2. 包含2个属性
    • type：标识属性, 值为字符串, 唯一, 必要属性
    • data：数据属性, 值类型任意, 可选属性
  3. 例子：{ type: ‘ADD_STUDENT’,data:{name: ‘tom’,age:18} }

7.2.2. reducer

  1. 用于初始化状态、加工状态。
  2. 加工时，根据旧的state和action， 产生新的state的纯函数。

7.2.3. store

  1. 将state、action、reducer联系在一起的对象
  2. 如何得到此对象?
    1. import {createStore} from ‘redux’
    2. import reducer from ‘./reducers’
    3. const store = createStore(reducer)
  3. 此对象的功能?
    1. getState(): 得到state
    2. dispatch(action): 分发action, 触发reducer调用, 产生新的state
    3. subscribe(listener): 注册监听, 当产生了新的state时, 自动调用

7.3. redux的核心API

7.3.1. createstore()

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

7.3.2. store对象

  1. 作用: redux库最核心的管理对象
  2. 它内部维护着:
    1. state
    2. reducer
  3. 核心方法:
    1. getState()
    2. dispatch(action)
    3. subscribe(listener)
  4. 具体编码:
    1. store.getState()
    2. store.dispatch({type:‘INCREMENT’, number})
    3. store.subscribe(render)

7.3.3. applyMiddleware()

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

7.3.4. combineReducers()

作用：合并多个reducer函数

7.4. 使用redux编写应用

  1. 求和案例_redux精简版

    1. 去除Count组件自身的状态

    2. src下建立:

      • -redux
        • -store.js
        • -count_reducer.js

    3. store.js:

      1. 引入redux中的createStore函数,创建一个store
      2. createStore调用时要传入一个为其服务的reducer
      3. 记得暴露store对象
      // store.js
import {createStore} from 'redux'
import countReducer from './count_reducer'
const store = createStore(countReducer)

export default store

    4. count_reducer.js:

      1. reducer的本质是一个函数,接收: preState,action,返回加工后的状态
      2. reducer有两个作用:初始化状态,加工状态
      3. reducer被第一次调用时,是store自动触发的
        • 传递的preState是undefined
        • 传递的action是:{type:’@@REDUX/INIT_a.2.b.4’}
      // count_reducer.js
const initState = 0
export default function countReducer(preState=initState, action) {
    const {type,data} = action
    switch(type) {
        case 'increment':
            return preState + data
        case 'decrement':
            return preState - data
        default:
            return preState ;
                
    }
}

    5. 在index.js中检测store中状态的改变,一旦发生改变重新宣染。
      备注: redux只负责管理状态,至于状态的改变驱动着页面的展示,要靠我们自己写。

  2. 求和案例_redux完整版新增文件:
    1. count_action.js专门用于创建action对象
    import {INCREMENT,DECREMENT} from './constant'
export function createIncrementAction(data) {
    return {type:INCREMENT,data}
}
// 表达式返回值用小括号包裹
export const createDecrementAction = data => ({type:DECREMENT,data})
    1. constant.js放置由于编码疏忽写错action中的type,便于后期维护
    // 定义action中type类型的常量值
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'

7.5. redux异步编程

7.5.1理解：

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

7.5.2. 使用异步中间件

npm install --save redux-thunk

7.5.3. 求和案例_redux异步action版

  1. 明确:延迟的动作不想交给组件自身,想交给action。
  2. 何时需要异步action:想要对状态进行操作,但是具体的数据靠异步任务返回。
  3. 具休编码:
    1. yarn add redux-thunk,并配置在store中
    2. 创建action的函数不再返回一般对象,而是一个函数,该函数中写异步任务。
    3. 异步任务有结果后,分发一个同步的action去真正操作数据。
  4. 备注:异步action不是必须要写的,完全可以自己等待异步任务的结果了再去分发同步action。

store.js

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import countReducer from './count_reducer'

const store = createStore(countReducer,applyMiddleware(thunk))

export default store

count_action.js

import {INCREMENT,DECREMENT} from './constant'

export const createIncrementAction = data => ({type:INCREMENT,data})
// 表达式返回值用小括号包裹
// 同步action，就是指返回值为对象
export const createDecrementAction = data => ({type:DECREMENT,data})
// 异步action，就是指返回值为函数，异步action中一般都会调用同步action
export const createIncrementAsyncAction = (data,time) => {
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(createIncrementAction(data))
        },time)
    }
}

7.6. react-redux

7.6.1. 理解

  1. 一个react插件库
  2. 专门用来简化react应用中使用redux

7.6.2. react-Redux将所有组件分成两大类

  1. UI组件

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

  2. 容器组件

    1. 负责管理数据和业务逻辑，不负责UI的呈现
    2. 使用 Redux 的 API
    3. 一般保存在containers文件夹下

7.6.3. 相关API

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

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

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

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

7.6.4. react-redux优化

  1. 容器组件和UI组件混成一个文件
  2. 无需自己给容器组件传递store,给包裹一个即可。
  3. 使用了react-redux后也不用再自己检测redux中状态的改变了,容器组件可以自动完成这个工作。
  4. mapDispatchToProps也可以简单的写成一个对象。
  5. 一个组件要和redux“打交道”要经过哪几步?
    1. 定义好UI组件-不暴露
    2. 引入connect生成一个容器组件,并暴露,写法如下:
      connect(
    state => ({key:value}) // 映射状态
    {key:xxxxxAction} // 映射操作状态的方法
)(UI组件)
    3. 在UI组件中通过this.props.xxxxxxx读取和操作状态
      container/count/index.jsx
// 容器组件
import {connect} from 'react-redux'
import {createIncrementAction,createDecrementAction,createIncrementAsyncAction} from '../../redux/count_action'
import React, { Component } from 'react';

class Count extends Component {
    state = {}

    // 加法
    increment = ()=> {
        const {value} = this.selectNumber
        this.props.jia(value*1)
    }
    // 减法
    decrement = ()=> {
        const {value} = this.selectNumber
        this.props.jian(value*1)
    }
    // 奇数再加
    incrementOfOdd = ()=> {
        const {value} = this.selectNumber
        if(this.props.count % 2 !==0) {
            this.props.jia(value*1)
        }
    }
    // 异步加
    incrementAsync = ()=> {
        const {value} = this.selectNumber
        this.props.jiaAsync(value*1,500)
    }
    render() {
        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.incrementOfOdd}>奇数再加</button>
                <button onClick={this.incrementAsync}>异步加</button>
            </div>
        );
    }
}

export default connect(
    state => ({count:state}),
    {
        jia:createIncrementAction,
        jian:createDecrementAction,
        jiaAsync:createIncrementAsyncAction
    }
)(Count)

7.6.5. 数据共享

  1. 定义一个Pserson组件,和Count组件通过redux共享数据。
  2. 为Person组件编写: reducer、action,配置constant常量。
  3. 重点: Person的reducer和ICount的Reducer要使用combineReducers进行合并,合并后的总状态是一个对象!!!
  4. 交给store的是总reducer,最后注意在组件中取出状态的时候,记得“取到位”。
    store.js
import {createStore,applyMiddleware,combineReducers} from 'redux'
import thunk from 'redux-thunk'
import countReducer from './reducers/count'
import personReducer from './reducers/person'

// 汇总
const allReducer = combineReducers({
    he: countReducer,
    ren: personReducer
})

const store = createStore(allReducer,applyMiddleware(thunk))

export default store

7.7. 使用上redux调试工具

7.7.1. 安装chrome浏览器插件

7.7.2. 下载工具依赖包

npm install --save-dev redux-devtools-extension

引用

import {composeWithDevTools} from 'redux-devtools-extension'
const store = createStore(allReducer,composeWithDevTools(applyMiddleware(thunk)))
淮里没有猫
关注
专栏目录
react-redux@7.1用于hooks的API
xiaohesong
06-14 2634
React-redux 7.1发版啦。 因为在新的项目中用到了hooks，但是用的时候react-redux还处于alpha.x版本的状态。用不了最新的API，感觉不是很美妙。好在，这两天发布了7.1版本。 现在来看看怎么用这个新的API。 useSelector() const result : any = useSelector(selector : Function, equalityFn?...
React学习笔记四(redux和react-redux和Redux Toolkit)
kianagrow的博客
12-18 926
React学习笔记四(redux和react-redux和Redux Toolkit)
React之Redux（七）
weixin_42589562的博客
02-19 157
工作流程 好理解的办法 React Components: 借书人 Action Creators: 借书 Store: 图书馆管理员 Reducers: 记录本 Ant Design 1. 安装 npm i antd --save 2. 使用 import ‘antd/dist/antd.css’; 使用Store 1. store/index.js 是一个store import { cr...
react-7（redux）
weixin_45626517的博客
10-09 244
由于redux只能做同步操作，如果需要做异步操作，需要借助中间件（redux-thunk 或者 redux-saga，二选一）。 在react中，只要你需要进行状态管理，就需要使用redux； 如果想要简化代码，将业务逻辑和UI组件分离，就需要使用react-redux； 如果要后台进行异步交互，就需要使用redux-thunk 或者 redux-saga。 react-redux 思想一：react-redux的作用...
redux7 - 手写实现 react - redux 基本功能 Provider 和 connect
冲锋
06-02 558
参考reac-redux 库 源码 以下实现的功能代码演示地址 使用react-redux库 官方 react-redux 库，使用 index.js import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './reducers/store'; ReactDOM.render( <Provider store={st
React07---redux
NDSoumig的博客
01-01 153
Redux:不是react,更多的用在react里面，管理react应用中多个组件共享 Redux工作流程: 什么情况需要redux: 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用 某个组件的状态，需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件的状态 未拆分成redux的app.jsx import ...
React学习笔记---redux
丑小鸭变黑天鹅的博客
12-31 1380
redux一、redux理解1、学习文档2、redux是什么3、什么情况下需要使用redux4、redux工作流程二、redux的三个核心概念 一、redux理解 1、学习文档 英文文档: https://redux.js.org/ 中文文档: http://www.redux.org.cn/ Github: https://github.com/reactjs/redux 2、redux是什么 redux是一个专门用于做状态管理的JS库(不是react插件库)。 它可以用在react, angula
React 状态管理工具 - Redux 学习笔记
爱玲姐姐的博客
12-28 1058
React 状态管理工具 - Redux 文章出处： 拉 勾 大前端 高薪训练营 1. Redux 核心 1.1 Redux 介绍 JavaScript 状态容器，提供可预测化的状态管理 1.2 Redux 核心概念及流程 Store: 存储状态的容器，JavaScript 对象 View: 视图，HTML页面 Actions: 对象，描述对状态进行怎样的操作 Reducers: 函数，操作状态并返回新的状态 1.3 Redux 使用： 计数器案例 <!DOCTYPE html> <h
react学习笔记---redux
sumisu666的博客
05-25 308
redux01-redux精简版---redux原理图如下：02-redux完整版03-redux异步action版04-react-redux基本使用05-react-redux的优化06-react-redux数据共享版07-react-redux开发者工具的使用08-react-redux最终版 01-redux精简版 —redux原理图如下： redux精简版总结 （1）去除Count组件自身的状态 （2）src下建立 -src -redux -store.js -count_reduce
React 学习笔记 —— redux 示例完整版
叹之
04-08 480
描述：组件 Count、组件 Person，将数据存入 Redux，实现数据共享 目录结构 App.js import React, { Component } from 'react' import Count from './containers/Count' import Person from './containers/Person' // 引入 容器组件 并使用 export default class App extends Component { render() { ..
react基础知识-7.redux
贝贝小菜鸟的博客
02-09 152
redux是负责组织state的工具,使用的时候,需要Redux的好处和坏处,酌情使用。一般在下面场景中，会引入redux 有相当大量的、随时间变化的数据 你的state需要有一个单一可靠数据来源 你觉得把所有的state都放在最顶层组件中无法满足需求 某个组件的状态需要共享 7.1redux redux是Javascript应用的状态管理容器，提供可预测化的状态管理，他保证了程序行为的一致性且易用测试。 7.2 安装redux npm install redux -s 7.3 redux上手 如果要
【React】Redux的使用详解
m0_68324632的博客
01-17 5649
Redux就是一个帮助我们管理State的容器：Redux是JavaScript的状态容器，提供了可预测的状态管理
react-redux 中使用useSelector、useDispatch
大灰狼的小绵羊哥哥的博客
05-01 7759
1. react-redux 之 Hooks api Hooks 提供了很多好用的api，甚至很多人认为Hooks的useReducer等Api已经可以取代Redux了。其实Hooks和Redux的使用场景并不冲突，而且可以互相借鉴，react-redux(7.1)也引入了Hooks风格的Api。 1.1 useState 的缺点 useState和useReducer是Hooks中最常用的Api，适合用来进行简单的状态管理，但也都有一些无法满足的需求 useState可以用最简单的方式更新
React进阶（九）：React-Redux
2401_84412050的博客
04-29 322
组件的同名参数，里面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到。作为函数返回一个对象，该对象的每个键值对都是一个映射，定义了。但需要定义业务逻辑，组件才有意义。执行后应该返回一个对象，里面的每一个键值对就是一个映射。组件的同名参数，键值应该是一个函数，会被当作。作为参数，返回一个对象。它可以是一个函数，也可以是一个对象。下面是一个计数器组件，它是一个纯的。它是一个函数，建立一个从（外部的）
React 和 Redux 中 State 如何注入到组件：从 Reducer 到组件的过程
最新发布
My_wife_QBL的博客
08-05 784
接下来，我们定义 reducer。假设我们有一个简单的计数器应用。count: 0,default:在这个例子中，处理INCREMENT和DECREMENT两种 action，并根据这些 action 更新 state。在 React 和 Redux 的生态系统中，state 从 reducer 到组件的注入过程是一个高效且清晰的流程。首先，应用通过 Redux store 管理状态；然后，用户通过交互触发 action；接着，reducer 根据 action 更新状态；最后，组件通过或。
React学习笔记（2）redux
到得还来别无事，庐山烟雨浙江潮。
05-06 211
store 是核心 其中包含了state ，state的结构和内容决定了UI的样子，UI层可以去触发action（动作），每一个action指代一个state更改为另外一个状态，action会发送到reducer，reducer根据action中的描述将store中的state修改，从而我们的到新的state，新的state就会得到新的ui，如此往复，这就是redux中的数据流 4-...
React学习笔记
njkl2166的博客
03-04 503
React构建Web和原生交互界面的库，相较于其它前端框架的优势，具有丰富的生态跨平台支持。
React&Redux
weixin_73416102的博客
12-01 923
React&Redux
React学习（六）— 状态管理Redux
小绵杨
07-27 1299
刚开始你可以只有一个reducer，随着应用变大，你可以把它拆成多个小的reducers，分别独立地操作statetree的不同部分，因为reducer只是函数，你可以控制它们被调用的顺序，传入附加数据，甚至编写可复用的reducer来处理一些通用任务，如分页器。方法发送action，参数就是需要传递的action对象，然后reducer接收到action并处理，返回新的state，视图自动更新。将数组展开然后和新增的todo合并，对象同样可以使用扩展运算符达到新增属性的目的。......
react-redux action传参 多个state处理
weixin_41040445的博客
07-26 1013
react-redux 传参和多个state
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值