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

react笔记：redux

news 2025/12/1 23:47:29

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.