react笔记：redux

news2024/11/14 13:40:30

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}=action
    switch (type){
        case INCREMENT:
            return preState+data
        case DECREMENT:
            return preState-data
        default:
            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中的状态的变化，只要变化，就调用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({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>
        <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.