redux的使用

最新推荐文章于 2024-06-12 10:15:32 发布

Dear热热

最新推荐文章于 2024-06-12 10:15:32 发布

阅读量677

点赞数 1

文章标签：数学建模

本文链接：https://blog.csdn.net/weixin_45414972/article/details/131390778

版权

求和案例

react函数版

import React, { useRef , useState } from 'react'

export default function Count() {
    const [count,setCount] = useState(0)
    const selectNumber = useRef(null)
    function increment() {
        const value = Number(selectNumber.current.value)
        setCount(count=>count+value)
    }
    function decrement() {
        const value = Number(selectNumber.current.value)
        setCount(count=>count-value)
    }
    function incrementIfOdd() {
        const value = Number(selectNumber.current.value)
        if(count % 2 !== 0){
            setCount(count=>count+value)
        }
    }
    function incrementAsync() {
        const value = Number(selectNumber.current.value)
        setTimeout(() => {
            setCount(count=>count+value)
        }, 500);
    }

    return (
        <div>
            <h1>当前求和为{count}</h1>
            <select ref={selectNumber}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>&nbsp;
            <button onClick={() => increment()}>+</button>&nbsp;
            <button onClick={() => decrement()}>-</button>&nbsp;
            <button onClick={() => incrementIfOdd()}>当前求和为奇数再加</button>&nbsp;
            <button onClick={() => incrementAsync()}>异步加</button>
        </div>
    )
}

react类版

import React, { Component } from 'react';

class Index extends Component {

    state = {
        count:0
    }

    increment=()=>{
        const {value} = this.selectNumber
        const {count} = this.state
        this.setState({count:count+Number(value)})
    }
    decrement=()=>{
        const {value} = this.selectNumber
        const {count} = this.state
        this.setState({count:count-Number(value)})
    }
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        const {count} = this.state
        if(count % 2 !== 0){
            this.setState({count:count-Number(value)})
        }
    }
    incrementAsync=()=>{
        const {value} = this.selectNumber
        const {count} = this.state
        setTimeout(() => {
            this.setState({count:count-Number(value)})
        }, 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>
        </div>
        );
    }

   
}

export default Index;

redux精简版

组件

import React, { Component } from 'react';
import store from '../../redux/store';


class Index extends Component {

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

    increment=()=>{
        const {value} = this.selectNumber
        store.dispatch({type:'increment',data:Number(value)})
    }
    decrement=()=>{
        const {value} = this.selectNumber
        store.dispatch({type:'decrement',data:Number(value)})
    }
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(store.getState() % 2 !== 0){
            store.dispatch({type:'increment',data:Number(value)})
        }
    }
    incrementAsync=()=>{
        const {value} = this.selectNumber
        setTimeout(() => {
            store.dispatch({type:'increment',data:Number(value)})
        }, 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>
        </div>
        );
    }

   
}

export default Index;

redux→store.js

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

// 引入createStore，专门用于创建redux中最为核心的store对象
import {legacy_createStore as createStore} from 'redux'

// 引入为Count组件服务的reducer
import CountReducer from './count_reducer'
// 暴露store
export default createStore(CountReducer)

redux→count_reducer.js

/**
 * 1. 该文件是用于创建一个为为Count组件服务的reducer,reducer的本质是一个函数
 * 2. reducer函数会接收到两个参数，分别为：之前的状态（preState），动作对象（action）
 */
const intState = 0; //初始化状态
// preState===undefined时，preState = intState
export default function countReducer(preState = intState, action) {
  // 从action对象中获取：type,data
  const { type, data } = action;
  // 根据type决定加工数据
  switch (type) {
    // 加
    case "increment":
      return preState + data;
    //  减
    case "decrement":
      return preState - data;
    default:
      return preState;
  }
}

redux完整版

组件

import React, { Component } from 'react';
import store from '../../redux/store';
import {createIncrementAction,createDecrementAction} from '../../redux/count_action'



class Index extends Component {

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

    increment=()=>{
        console.log(createIncrementAction)
        const {value} = this.selectNumber
        // store.dispatch({type:'increment',data:Number(value)})
        store.dispatch(createIncrementAction(Number(value)))
        // 
    }
    decrement=()=>{
        const {value} = this.selectNumber
        store.dispatch(createDecrementAction(Number(value)))
    }
    incrementIfOdd=()=>{
        const {value} = this.selectNumber
        if(store.getState() % 2 !== 0){
            store.dispatch(createIncrementAction(Number(value)))
        }
    }
    incrementAsync=()=>{
        const {value} = this.selectNumber
        setTimeout(() => {
            store.dispatch(createIncrementAction(Number(value)))
        }, 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>
        </div>
        );
    }

   
}

export default Index;

redux→store.js

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

// 引入createStore，专门用于创建redux中最为核心的store对象
import {legacy_createStore as createStore} from 'redux'

// 引入为Count组件服务的reducer
import CountReducer from './count_reducer'
// 暴露store
export default createStore(CountReducer)

redux→count_reducer.js

/**
 * 1. 该文件是用于创建一个为为Count组件服务的reducer,reducer的本质是一个函数
 * 2. reducer函数会接收到两个参数，分别为：之前的状态（preState），动作对象（action）
 */
import {INCREMENT,DECREMENT} from './constant'
const intState = 0; //初始化状态
// preState===undefined时，preState = intState
export default function countReducer(preState = intState, action) {
  // 从action对象中获取：type,data
  const { type, data } = action;
  // 根据type决定加工数据
  switch (type) {
    // 加
    case INCREMENT:
      return preState + data;
    //  减
    case DECREMENT:
      return preState - data;
    default:
      return preState;
  }
}

redux→count_action.js

/*
    该文件专门为Count组件生成action对象
*/
import {INCREMENT,DECREMENT} from './constant'
export const createIncrementAction = data => ({type:INCREMENT,data})

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

redux→constant.js

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

export const INCREMENT = 'increment'
export const DECREMENT = 'decrement'