• redux与react-redux的学习笔记之redux

    redux与react-redux

    前言

    工作中Vue为主，React使用逐渐生疏，对redux仅达到会用的地步。偶尔遇到React项目，用到redux也就是把别人写过的东西重写一遍，最近有时间去B站白嫖了一下 React教程。写个笔记记录下！！！

    一、redux和react-redux是啥？

    redux是 JavaScript 状态容器，提供可预测化的状态管理，是一个独立的库可以搭配UI框架进行使用。
    与redux稍加不同的是，react-redux是 React 的官方 Redux UI 绑定库，可以订阅 store、检查更新数据和触发重新渲染的过程可以变得更加通用和可复用。
    简单的说，react-redux最终还是使用redux去取数据，不过是封装一层方便使用redux的api。
    相对于Vuex的简单无脑操作，这两个算是稍微麻烦一点的。不过后续阿里封装了个hox，使用起来感觉简单了很多。

    二、redux使用步骤

    1.引入库

    代码如下（示例）：

    npm install redux

    • 1

    2.原理图

    在这里插入图片描述

    actions

    1）含义

    Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch() 将 action 传到 store。

    action返回的是Object类型的叫做同步action
action返回的是Function类型的叫做异步 action
异步action:
(1).明确：延迟的动作不想交给组件自身，想交给action
(2).何时需要异步action：想要对状态进行操作，但是具体的数据靠异步任务返回（非必须）
(3).具体编码：
    1).cnpm i redux-thunk，并配置在store中，//行驶转换程序
    2).创建action的函数不再返回一般对象，而是一个函数，该函数中写异步任务
    3).异步任务有结果后，分发一个同步的action去真正的操作数据
(4).备注：异步action不是必须要写的，完全可以自己等待异步任务的结果再去分发同步action

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    2）demo
    //redux文件夹下新建constant.js文件
/* 该模块适用于定义action对象中type类型的常量值
目的只有一个：便于管理的同时防止单词写错   
 */

export const INCREMENT = 'increment'

export const DECREMENT = 'decrement'

export const SET_OPERATOR = 'setOperator'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    //redux文件夹下新建action文件夹
//action下新建count_actions.js
/*
 该文件专门为Count组件生成求和count_actions对象   
 */

import {INCREMENT, DECREMENT} from '../constant'

export const incrementAction = (data) => ({ type: INCREMENT, data })//同步action
//同步action，就是指action的返回值为Object类型的一般对象
export function decrementAction(data){ 　　
    return { 　　　　
        type: DECREMENT, 
        data 　　
    }//返回的是一个对象，普通数据类型，同步action，返回对象为异步
}
//异步action，就是指action的返回值为函数
//异步action中，一般都会调用同步action，异步action不是必须要用的
export const incrementAsyncAction = (data, time) => {
    return (dispatch)=>{//返回对象为异步action
        setTimeout(()=>{
            dispatch(incrementAction(data))
        }, time)
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    //action下新建user_action.js
import { SET_OPERATOR } from '../constant'

export function setOperator(data){
    return{
        type: SET_OPERATOR,
        data,
    } 
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    store.js

    1）含义

    store是一个状态管理器，是一个仓库，存储公共的状态数据。Redux 应用只有一个单一的 store

    1）引入redux中的createStore函数，创建一个store
2）createStore调用时要传入一个为其服务的reducer
3）记得暴露store对象
4)  redux只负责管理状态，至于状态的改变驱动着页面的展示要靠我们自己写

    • 1
    • 2
    • 3
    • 4
    2）demo
    //redux文件夹新建store.js
//引入creacteStore,专门用于创建redux中最核心的store对象,applyMiddleware执行中间件
import { legacy_createStore as createStore, applyMiddleware} from "redux";
//引入redux-thunk用于支持异步action
import thunk from 'redux-thunk'
//引入为组件服务的reducer
import rootReducers   from './reducers'
const store  = createStore(rootReducers, applyMiddleware(thunk))
//暴露出去
export default store

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    reducer.js

    1）含义

    Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

    1）reducer的本质是一个函数，接收：preState,action,发布加工后的状态
2）reducer有两个作用：初始状态，加工状态
3）reducer被第一次调用时，是store自动触发的，传递的preState是undefined

    • 1
    • 2
    • 3
    2）demo
    //redux文件夹下新建reducers文件夹
//新建count_reducer.js
import {INCREMENT, DECREMENT} from '../constant'
//监测提交过来的action，preState是前一条数据，初始化时默认为0
const counter = (preState = 0,action)=>{
    const {type, data}= action
    switch(type){
        case INCREMENT:
            return preState + data;
        case DECREMENT:
            return preState - data;
        default:
            return preState;
    }
}

export default counter;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    //redux文件夹下新建reducers文件夹
//新建user_reducer.js
import { SET_OPERATOR } from '../constant'

const operator = (preState = {}, action)=>{
    const {type, data}= action
    switch(type){
        case SET_OPERATOR:
            return Object.assign(preState, data);
        default :
            return preState
    }
}

export default operator;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    //redux文件夹下新建reducers文件夹
//新建index.js

import { combineReducers } from 'redux';
import counter from './count_reducer';
import operator from './user_reducer'

// 合并多个 reduce
const rootReducers = combineReducers({
    counter:counter,
    operator:operator
});

export default rootReducers;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    Count.jsx

    1）含义

    操作组件，里面包含数据加减，和数据赋值两个功能

    2）demo
    import React, { Component } from 'react'
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import {incrementAction, decrementAction, incrementAsyncAction} from '../../redux/actions/count_actions'

import { setOperator } from '../../redux/actions/user_action'

class Count extends Component {
    state = {
        
    }
    
    //加
    increment=()=>{
        const {value}=this.selectNumber
        store.dispatch(incrementAction(value*1))
    }
    //减
    decrement=()=>{
        const { value } = this.selectNumber
        store.dispatch(decrementAction(value*1)) 
    }
    //当前求和的数据为奇数再加
    incrementIfOdd=()=>{
        const counter = store.getState().counter
        const { value } = this.selectNumber
        if(counter % 2 !== 0) {
            store.dispatch(incrementAction(value*1))
        }
        
    }
    //异步加
    incrementAsync=()=>{
        const { value } = this.selectNumber
        // setTimeout(()=>{
        store.dispatch(incrementAsyncAction(value*1, 3000))
        // }, 2000)
    }
    addUserInfo = () => {
        const operator = {
            name: '大黄'+Math.floor(Math.random()*100),
            age: Math.floor(Math.random()*100)
        }
        store.dispatch(setOperator(operator))
    }   
    render() {
       console.log(store.getState())
        const counter = store.getState().counter
        const operator = store.getState().operator
        return (
            <div>
                
                <h1>当前求和为{counter}</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>
                    <button onClick={()=>{this.addUserInfo()}}>添加用户信息</button>
                    <div style={{display: operator?.name ? 'block' : 'none'}}>姓名：{operator?.name},
                    年龄：{operator?.age}</div>
                </div>
            </div>
        )
    }
}

export default Count;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    //App.js
import Count from './components/Count'

function App() {
  return (
    <div className="App">
      <Count/>
    </div>
  );
}

export default App;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    //index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import store from './redux/store'
import App from './App';
import {Provider} from 'react-redux'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);  
// 监听数据变化
store.subscribe(() => {
  root.render(
    <Provider store={store}>
      <App />
    </Provider>
  );  
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    总结

    代码捋顺了，按照官方给的思路去写简单的demo，应该也还行。东西有点多，react-redux另起一篇文章。

  • 相关阅读:
    在vmware虚拟机中安装Linux系统CentOS7详细教程
    WSA工具箱安装应用商店提示无法工作怎么解决？
    挠场的科学丨一、特斯拉的特异功能与电力产业的兴起
    【openstack】卷迁移导致的虚机热迁移失败问题排查及解决
    【算法——双指针】LeetCode 18 四数之和
    【VUE】点击哪个按钮哪个高亮
    双十二电容笔哪个品牌好？十大电容笔知名品牌
    【912.排序数组】
    2000-2023年各省年末常住人口数据（无缺失）
    【ES6】学习笔记：字符串扩展
  • 原文地址：https://blog.csdn.net/chenacxz/article/details/127833804