在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 
    }
}

四、redux完整的工作流程

(1)：ui 组件中通过 `store.getState()`获取`store`中的状态

(2)：`store` 收到获取状态信号后，触发`reducer` 函数，输出最新的状态

 当有action更改store中state时：

(1)：在ui组件中通过`store.dispatch(action)` 传入action对象，告诉store,什么行为，什么数据

(2)：`store` 收到action后，命令`reducer` 根据`acion.type` 修改state，并输出最新你的状态。

最后

以上就是文艺御姐为你收集整理的react中的redux一、redux是什么？二、reduxde工作原理三、概念解析四、redux完整的工作流程的全部内容，希望文章能够帮你解决react中的redux一、redux是什么？二、reduxde工作原理三、概念解析四、redux完整的工作流程所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。