redux -学习笔记

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

文章目录

1redux介绍

1.1学习文档

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

1.2redux是什么

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

1.3什么情况下需要使用redux

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

在这里插入图片描述

2react-redux

在这里插入图片描述

3redux工作流程

在这里插入图片描述
ActionCreator :相当于服务员
type：加减乘除之类动做
data：数字之类数据
dispatch：分发，把action继续往下送下去。
store：调度的人
reducer：初始化状态、加工状态
初始化也是一个action，在这个action之前preciousState值是undefined

在这里插入图片描述

在这里插入图片描述

4redux三个核心概念

action

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

reducer

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

store

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

5求和案例-纯react版

increment if odd如果是奇数再加
异步加
在这里插入图片描述

create-react-app redux-test

mport React, { Component } from 'react'

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>&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>
		)
	}
}

6求和案例Redux精简版

第一次调用 prestate和action的值

第一次调用时候，可以查看preState和action
在这里插入图片描述
在这里插入图片描述
prestate是undefined，action是初始化，后面是随机字符 ，害怕与写的type重复。
在这里插入图片描述

redux状态更改默认不会更改界面

在这里插入图片描述

在这里插入图片描述
要监控redux，状态改变调用render
在这里插入图片描述
在这里插入图片描述
这时要调用render
在这里插入图片描述
还是不起作用，直接调用不起作用
在这里插入图片描述啥也不更新，这会调用render，成功。
在这里插入图片描述
但这样每个组件都要调用，很不方便，可以在index下进行改动。把可以把整个app都重新调用render
在这里插入图片描述
有dom的diff算法，不会全部重新排。

编写顺序

在这里插入图片描述
1redux/store

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

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

2redux/count_reducer

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

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
	}
}

3components/count/index

import React, { Component } from 'react'
//引入store，用于获取redux中保存状态
import store from '../../redux/store'

export default class Count extends Component {

	state = {carName:'奔驰c63'}

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

	//加法
	increment = ()=>{
		const {value} = this.selectNumber
		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>&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>
		)
	}
}

4修改index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'

ReactDOM.render(<App/>,document.getElementById('root'))

store.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})

5app.js没有修改
在这里插入图片描述

总结

在这里插入图片描述

7完整版

新增文件：
			1.count_action.js 专门用于创建action对象
			2.constant.js 放置容易写错的type值
就多了两个文件，对象要actioncreators去创建

1创建count_action.js
在这里插入图片描述

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

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

这里（{}）返回对象，{{}}为undefined原因是{}被认为是函数体外的{}
在这里插入图片描述

文件

1components/count/index

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>
		)
	}
}

2redux/constant

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

3redux/count_actions

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

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

4redux/count_reducer

/* 
	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
	}
}

5redux/store

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

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

6app

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

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

7index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'

ReactDOM.render(<App/>,document.getElementById('root'))

store.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})

8异步action

 (1).明确：延迟的动作不想交给组件自身，想交给action
 (2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回。
 (3).具体编码：
 			1).yarn add redux-thunk，并配置在store中
 			2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务。
 			3).异步任务有结果后，分发一个同步的action去真正操作数据。
 (4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果了再去分发同步action。
雨浅听风吟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Redux学习笔记
doomliu的博客
05-15 190
一、状态机 redux用来帮助我们管理应用的状态，它本身和React并无关系，但是非常多的React应用都选择是用redux管理应用的状态。在实际的React项目中，使用redux和react-redux这两个工具。react-redux这个工具提供了一系列的简洁api，让我们更好地在React中使用redux。 redux的设计理念基于状态机的概念。当一个应用的状态较多，状态变化逻辑比较复杂时候，使用状态机来梳理逻辑会有助于开发者理解和实现。 状态机提出“状态”（state）和“操作”（action）的概
(十一)学习笔记--redux-persist持久化数据存储+中间件封装
Augustine_Cyq的博客
06-09 1633
说明： 一般在react项目中，我们通过redux和react-redux来存储和管理数据，但是使用redux存储数据时，会有一个问题，如果用户刷新了页面，那么通过redux存储的全局数据就会被重置，比如登录状态等。 这个时候有没有解决办法呢？答案肯定是有的： 一般我们可以使用sessionStorage或者localStorage来达到数据存储的要求，但既然我们使用了redux来管理和存储全局数据，如果再使用sessionStorage或者localStorage来读写数据，.
Redux 笔记
学习笔记
12-07 337
redux toolkit
redux笔记
我们一起学前端
07-09 217
一、redux全息图 上图说明： 第一次调用是指产生store对象的时候调用的，然后初始化state 反复调用是更新的时候（store.dispatch）,返回新的state 二、概要说明 ①核心的store，通过一个函数createStore产生一个store，需要一个reducer函数作为参数 ②reducer函数的作用：根据当前state和传入的action，返回一个新的state ③修...
Redux笔记（一）：基础用法
weixin_43878117的博客
11-11 278
1.什么是Redux Redux是一个JavaScript状态容器，提供可预测化的状态管理。Redux除了可以和React一起使用外，还支持其他的界面库。 2.三大原则 单一数据源（整个应用的state被存储在一个object tree中，并且这个object tree只存在于唯一一个store中。这样可以保证整个数据的唯一性，为维护阅读起来更便捷） state是只读的（唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象） 使用纯函数来执行修改（为了描述actio
redux
u011927449的博客
06-30 191
Redux介绍 单一数据源 整个单页应用的 state 都被储存在store的内部，可以通过store.getState()获取，再作为props传给对应的组件。 state应该尽量少嵌套扁平化，通过id相互引用数据。 import { createStore } from 'redux'; const store = createStore(reducer); //stroe需要reducer计算新的state //createStore函数的简单实现 const create.
Redux-学习笔记
小猴子的博客
08-04 104
文章目录Redux-学习笔记安装ReduxRedux简介（为什么要用Redux?）Redux和ReactReact-reduxredux-actions使用项目打包 Redux-学习笔记 安装Redux redux需要安装以下依赖： cnpm install redux --save cnpm install react-redux --save cnpm install redux-actions --save @connect装饰器报错处理 因为用到了es6/7的语法，需要安装babel转码 npm
redux-saga学习笔记
qq_38001359的博客
07-18 194
redux-saga是什么？ 在redux的学习中，我们知道，redux中的reducer函数一定是一个纯函数，即该函数不随全局改变，也不改变全局状态。然后当redux需要处理一些带有副作用的异步任务时，redux采用中间件改造 dispatch ，从而诞生了一批通过构造满足特殊 pattern 条件的 action 来解决副作用的问题。而redux-saga是另一种非常强大处理副作用的工具。它提供了对异步流程更细粒度的控制，对每个异步流程他可以实现暂停、停止、启动三种状态。此外redux-saga利用了g
前端学习笔记-RxJS与Redux-Observable (一)
KL's Notebook
07-21 1337
文章目录RxJS可观察对象Observable观察者Observers多播的Subjects操作符OperatorsRedux-ObservableEpic 承接前文提到的异步Action话题，中间件redux-thunk易于编写和理解，但它也存在实践上的不足： 你最终可能会回调地狱，特别是在发出API请求时， 需要使用业务逻辑填充回调函数 或reducer函数去整理数据（数据格式不总是完美的，特别是使用第三方API时） 不利于测试（必须使用Spy方法来检查是否使用正确的对象进行dispatch） 然后
学习笔记：redux-saga
qq_31445163的博客
04-30 192
redux-saga学习笔记 基础概念 使用Saga Helpers 第一个函数 takeEvery是最为常见的，它提供了类似 redux-thunk的行为。 import {takeLatest,takeEvery} from 'redux-saga' 如果你有多个Saga 监视不同的action ，你也一用内置辅助函数创建很多的观察者。就像是用fork来派生一样。 声明式Effe...
redux使用说明
qq_43817972的博客
04-22 150
redux可以帮助我们统一的管理数据的状态，首先安装redux npm install --save redux 创建store.js文件，引入store构建器 import {createStore,applyMiddleware} from 'redux'; 引入reducer import countRecucer from './count_reducer'; /* 引入redux-thunk支持异步 */ import thunk from 'redux-thunk'; //将store暴露
react-redux状态管理（react18版本）
weixin_59554510的博客
04-24 3226
react的状态管理还是挺多的现在流行的有以下五种： Recoil MobX XState Redux Context 今天我们来讲一下react众多状态管理之一的redux，虽然这个我不太喜欢用，但是我觉得简单的状态管理谁都会，但是难的就是程序员的分水岭，所以今天来给大家讲一下redux。 下面我们来讲讲redux的优点： 可以在众多组件中传值，突破react单向数据流的限制 不仅支持react还支持vue等主流框架 当然是好用方便啦 接下来我们讲一下啥时候去使用他 在我们有好多组件，
redux的reducer纯函数处理state的2种方法
Spider--Man
04-02 3005
1、使用lodash的_.cloneDeep()函数 深复制，可以递归复制复杂的对象，Object.assign()和_.assign()只会复制对象的第一层属性，更深层次的属性是引用赋值的，指向同一对象const newState = cloneDeep(state) newState.name = action.name return newState2、使用官方提供的updateimport
如何使用useMemo来优化React组件的性能？
盼盼盼的博客
09-02 575
是 React 提供的一个 Hook，它可以用来记忆复杂计算的结果，避免在每次渲染时都进行重复计算，从而优化组件的性能。并不保证所记忆的值不会被丢弃。在React的将来的重渲染过程中，可能会清除这些值以释放内存。主要用于性能优化，而不是作为缓存机制。变化时，才会重新计算。
【2024】JAVA实现响应式编程Reactor具体API文档使用说明
最新发布
weixin_52315708的博客
09-05 876
响应式编程 (Reactive Programming) 是一种声明式编程范式，专注于数据流和变化的传播。随着软件系统日益复杂，对高并发、实时性和弹性的需求不断增长，响应式编程正逐渐成为主流。特别从Spring Boot3开始逐渐越来越重视使用，并且Spring框架为了全面拥抱响应式编程，提供了Spring WebFlux、Spring Data Reactive等模块，为Java开发者构建响应式应用提供了强大的支持。
React+Nest实现无感登录
DogEgg_001的博客
09-05 672
access_token用于带到请求头进行权限请求 当后端检测到过期时，通知前端acess_token已过期(401) 前端携带refresh_token发起刷新请求，后端根据refresh_token发送新的access_token 如果refresh_token也过期，就返回401给前端，通知前端退出登录
react hooks
weixin_48341937的博客
09-05 796
函数的副作用就是函数除了返回值外对外界环境造成的其它影响，即与组件渲染无关的操作。例如获取数据修改全局变量更新 DOM等。useEffect 是 React 中的 hooks API。通过 useEffect 可以执行一些副作用操作，例如：请求数据、事件监听等。其中：1. 第一个参数fn是一个副作用函数，该函数会在每次渲染完成之后被调用；2. 第二个参数是可选的依赖项数组，这个数组中的每一项内容都会被用来进行渲染前后的对比a. 当依赖项发生变化时，会重新执行 fn 副作用函数。
react自学(6) 部署到tomcat中
fracong的博客
09-02 293
1.设置项目名； 2.设置Router类型； 3.使用.env设置自定义变量； 4.在代码中获取变量； 5.多环境配置打包命令
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值