发布时间:2024-01-28 13:00
redux是什么?
简单说来就2点
1、redux是一个专门用于做状态管理的JS库,并非react插件库,但基本和react配合开发使用
2.其作用:集中式管理react应用中多个组件共享的状态,及负责管理状态
什么情况下需要使用redux?
1、某个组件的状态,需要让其他组件随时拿到共享
2、一个组件需要改变另一个组件的状态(或是通信)
简单画下redux原理图:
下面以一个求和的小demo对redux进行代码演示:实现加、减、奇数加、异步加
代码详解:
1、安装redux:
yarn add redux
1、新建action.js自行命名即可:该文件专门为Count组件生成action对象
//该文件专门为Count组件生成action对象
import{INCREMENT,DECREMENT} from './constant'
//加法
export function createIncrementAction(data){
return {type:INCREMENT,data:data}
}
//简约写法:
// export const createIncrementAction = data =>({type:'increment',data:data})
//减法
export function createDecrementAction(data){
return {type:DECREMENT,data:data}
}
2、**(核心)**新建store.js自行命名即可:该文件专门用于暴露一个store对象,整个应用只有一个store对象
// 该文件专门用于暴露一个store对象,整个应用只有一个store对象
//引入createStore,专门用于创建redux中最为核心的store对象
// import {createStore} from 'redux'
//createStore已经启用改用:
import {legacy_createStore as createStore} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//store暴露出去
export default createStore(countReducer)
3、新建reducer.js自行命名即可:该文件用于创建一个为Count求和组件服务的reducer、reducer本质就是一个函数
// 1.该文件用于创建一个为Count组件服务的reducer、reducer本质就是一个函数
//2.reducer函数会接收到两个参数,分别为:之前的状态(preState),动作对象(action)
import{INCREMENT,DECREMENT} from './constant'
export default function countReducer(preState, action) {
console.log(preState)
//初始化判断
if(preState===undefined) preState = 0
//从action对象中获取type和date
const { type, data } = action
//根据type决定如何加工数据
switch (type) {
case INCREMENT:
return preState + data//加
case DECREMENT:
return preState - data//减
default:
return preState
}
}
4、(可以不用)新建constant.js自行命名即可:该文件是用于定义action对象中type类型的常量值(规范开发,建议也对redux相关常量进行集中管理)
//该文件是用于定义action对象中type类型的常量值
//目的为了便于同时管理action的动作对象,可以不用
export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'
5、Count求和组件代码:
import React, { Component } from 'react'
//引入store,用于获取redux中保存的状态
import store from '../../redux/store'
//引入actionCreator,专用于创建action对象
import {createDecrementAction,createIncrementAction} from '../../redux/count_action'
export default class Count extends Component {
state = { myState: '自身独有的state' }
componentDidMount() {
//监测redux中状态的变化,只要变化,就调用render()
store.subscribe(() => {
//此处作用是为了更新render,即执行setState就会触发render
this.setState({})
})
}
//加法
increment = () => {
const { value } = this.selectNumber
//自己创建的action
// store.dispatch({ type: 'increment', data: value * 1 })
//通过actionCreator创建的action
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(createDecrementAction(value*1))
}
}
//异步加
incrementAsyc = () => {
const { value } = this.selectNumber
setTimeout(()=>{
store.dispatch(createDecrementAction(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.incrementAsyc}>异步加</button>
</div>
)
}
}
6、App.jsx代码:
import React, { Component } from 'react'
import Count from './components/Count'
export default class App extends Component {
render() {
return (
<div>
<Count/>
</div>
)
}
}
说明:
1、store.js:
(1)引入redux中的legacy_createStore(备注:createStore已废弃),创建一个store
(2)legacy_createStore调用时要传入一个为其服务的reducer
(3)暴露store对象
2、reducer.js:
(1)该文件用于创建一个为Count组件服务的reducer、reducer本质就是一个函数,接收preState,action、返回加工后的状态
(2)reducer有2个作用:初始化函数、加工状态
(3)reducer被第一次调用时,是store触发的,
传递的preState是undefined,
传递的action是类似如下格式数据:
{type: “@@redux/INITr.y.u.u.5.o”}
3、action.js:该文件专门为所服务的组件生成action对象
4、constant.js:统一管理action中相关的常量,同时也避免写错常量字段
5、备注:可在index.js入口文件中监测store中状态的改变,一旦发生改变重新渲染
代码如下:
原来:
ReactDOM.render(
<App/>,
document.getElementById('root')
)
新增监测后:记得引入store
store.subscribe(()=>{
ReactDOM.render(
<App/>,
document.getElementById('root')
)
})
补充:
redux只负责管理状态,至于状态的改变驱动着页面的展示,需要我们自己实现
搞定、兄弟萌赶快试试叭!!!
【java】234. Palindrome Linked List
动漫人物也能变“真人”?PaddleGAN帮你找到“撕漫”的TA
【Opencv】基于python-opencv的CV2实现图片OCR前的扫描摆正OCR识别【代码实现】
个人主页博客网页设计制作HTML5+CSS大作业——清新春暖花开个人博客网站(6页)
C语言—字符/字符串函数—strlen、strcpy、strcat、strcmp、strstr、strtok
遵循gpl协议 采用jar包_中国 GPL 诉讼第一案:关于 GPL 问题的探讨 | Linux 中国