当前位置: 首页 > news >正文

react笔记:redux

redux状态管理

安装redux:num i redux

新建redux文件夹:

  • store.js
  • count_reducer.js 
  • count_action.js    
  • constant.js          (常量)
1. store.js文件:
// 该文件专门用于暴露一个store对象,整个应用只有一个store对象
// 引入createStore,专门用于创建redux中最为核心的store对象
import {createStore} from 'redux'
// 引入为count组件服务的reducer
import countReducer from './content_reducer'
//暴露创建的reducer
export default createStore(countReducer)
2.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)const {type,data}=actionswitch (type){case INCREMENT:return preState+datacase DECREMENT:return preState-datadefault:return preState}
}
3.count_action.js文件:
// 该文件撞门为count组件生成action对象
import {INCREMENT,DECREMENT} from './constant'export const createIncrementAction=data=>({type:INCREMENT,data})
export const createDecrementAction=data=>({type:DECREMENT,data})

这里是下面函数的箭头函数的简写:函数返回一个对象

 export function createDecrementAction(data){return {type:DECREMENT,data}
}

写成箭头函数:函数调用后要返回一个对象,需要在对象外包一个括号的写法,就会返回一个对象,否则{}会默认当作函数体处理。-----如: ({type:INCREMENT,data})

4.constant.js文件
// 该模块是用于定义action对象中type类型的常量值
export const INCREMENT='increment'
export const DECREMENT='decrement'
 count组件中:
import React, { Component } from 'react'
import store from '../../redux/store'
import {createIncrementAction,createDecrementAction} from '../../redux/count_action'
export default class index extends Component {componentDidMount(){// 检测redux中的状态的变化,只要变化,就调用renderstore.subscribe(()=>{this.setState({})})}// 加increment=()=>{const {value}=this.selectNumberstore.dispatch(createIncrementAction(value*1))}// 减decrement=()=>{const {value}=this.selectNumberstore.dispatch(createDecrementAction(value*1))}// 奇数加incrementIfOdd=()=>{const {value}=this.selectNumberconst count=store.getState()if(count%2!==0){store.dispatch({type:'increment',data:value*1})}}// 异步加incrementAsync=()=>{const {value}=this.selectNumbersetTimeout(() => {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>)}
}
关于redux和视图更新:

修改store中的数据并不会触发视图更新,要触发视图更新,可以通过在组件内部订阅store的方式更新组件state。

一般更省事的方法是通过在入口文件中包一层订阅:

 

原理是只要store数据有更新,就触发App组件更新,这里react有diff算法,所以应该对性能的损耗不是特别大,所以这种方法也会更省事一点。

异步任务:

如果以下的业务代码异步加需要放到redux中处理,不想在组件内操作,则需要用到异步action:

dispatch一个异步任务action,传入参数值加的值,和异步时间:store.dispatch(createIncrementAsyncAction(value*1,1000))

   // 异步加incrementAsync=()=>{const {value}=this.selectNumber// setTimeout(() => {//     store.dispatch({type:'increment',data:value*1})// }, 500);// 异步任务:store.dispatch(createIncrementAsyncAction(value*1,1000))}

action中定义异步action:

// 异步action,就是指action的值为函数,因为只有在函数内部才能开启定时器等异步操作
export const createIncrementAsyncAction=(data,time)=>{return()=>{setTimeout(() => {store.dispatch({INCREMENT, data})}, time);}
}

这里dispatch部分也可以写成,调用了上面定义的同步任务,返回一个对象:

  store.dispatch(createIncrementAction(data))

 到这里触发异步操作就会报错:

Actions must be plain objects. Instead, the actual type was: 'function'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions.

因为store不能识别异步任务,所以这里要使用异步任务的话还需要一个中间件:redux-thunk

安装: npm i redux-thunk

使用:在store.js文件中导入thunk和applyMiddleware

此时就能执行异步任务了......

最后。可以发现,其实异步action并不是必须的,可以在业务组件中获取数据后再去修改维护store,但是如果需要抽离到action中,就会使用到。 

http://www.lryc.cn/news/424791.html

相关文章:

  • 数据结构与算法--图的应用
  • 【leetcode图文详解】特殊数组II : 空间换时间的“记忆化”,越多越好吗?
  • 离线安装prometheus与Grafana实现可视化监控
  • 【Python学习-UI界面】PyQt5 小部件7-QSpinBox 计数器
  • [二次元]个人主页搭建
  • Spring Data JPA 自动创建时间的相关注解和用法
  • Java基础之隐式类型转换
  • 【数据结构与算法 | 图篇】Dijkstra算法(单源最短路径算法)
  • windows c转linux c要做的事情。
  • 【高等代数笔记】002.高等代数研究对象(二)
  • ubuntu服务器部署的mysql本地连不上的问题
  • python redis安装
  • YJ0043定制版抖音电商卷抢购系统带回收商城抖音电商优惠卷投资理财系统
  • 如何选择图片和视频
  • html+css网页制作 电商华为商城首页 ui还原度100%
  • EDAS(企业级应用服务)
  • 简单工厂,工厂方法 和 抽象工厂
  • python 压力测试脚本
  • 【Linux】多线程7——线程池
  • Linux Shell实例
  • Linux~MySQL数据库具体操作
  • Unity WebGL平台Hybrid Generate All报错undefined symbol sendfile
  • Java高级Day28-多线程
  • 0003 保险的会计要素及其计量属性
  • Swift版本控制的艺术:掌握代码演化的魔杖
  • 学习实战:生活垃圾自动识别与分类系统的实现
  • Swift模块化构建:解锁代码重用的金钥匙
  • 【计算机网络】CIDR无分类编址知识学习
  • JavaScript 详解
  • 运维实践01-安装OpenJDK