react中的redux

最新推荐文章于 2024-07-26 11:41:15 发布

lulu不要等太久

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量1k

点赞数 5

文章标签： javascript 前端 react.js 前端框架

本文链接：https://blog.csdn.net/weixin_71258678/article/details/127060065

版权

在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，redux的出现就是为了解决state里面的数据问题

文章目录

一、redux是什么？

redux是js的状态管理器。

1：适用框架：

react 用的最多的

vue vue中基本不用，有自己的vuex

angular 很少用的

redux不是react插件，是一个独立的库

2：解决了哪些问题

(1)：状态私有化，变为公共状态

(2)：非关系型组件的通信问题。

(3)：集中式状态管理

二、reduxde工作原理

store是用来存取所有的状态，组件通过action告诉store需要改变状态，而store自己并不会进行操作，而是通知reducers进行更新状态操作，reducers会将新的状态传给store，store会将新的状态重新渲染给组件

三、概念解析

1. Store

Store就是保存数据的地方，整个应用只能有一个store

// createStore 作用：创建一个store实例对象
import { createStore } from 'redux';
// 导入自定义的 reducter
import countReducter from './countReducer'

let store =  createStore(countReducter)
// 导出store实例对象
export default store

2.Action

Action是一个对象，用来告诉store需要更改的状态，type属性是必须有的

 let action = {
            type:'add',
            data:1
        }

3.Reducer

Store收到Action以后，需要更新state，更新state的计算过程就是Reducer。
Reducer是一个纯函数，他接收Action和当前state作为参数，返回一个新的state

/**
 * 
 * countReducer 是一个reducer 就是一个函数
 */

let initState = 0; // 初始状态,对于不同状态的初始状态是不同的
export default function countReducer(preventState=initState,action){
    let { type,data } = action;

    // 根据不同的type完成具体的state更新逻辑
    if(type=='add') {
        // 返回最新的状态
        return preventState + data
    }else if(type=='reduce'){
        return preventState -data
    }else {
        // 作用：返回初始化状态。
        return preventState 
    }
}