React 之 Redux 第二十九节 Redux各项组成详解-EW帮帮网

1、Redux概述

Redux 是一个用于 JavaScript 状态容器，提供可以预测的状态管理
Redux 可以让我们的构建一致化的应用，运行于不同的环境，客户端、浏览器、服务器，并且易于测试；
Redux 除了和React一起使用，还支撑其他界面库，并且体检很小，只有2kb

2、Redux 的设计初衷

随着js单页面开发应用的日益复杂，js需要管理的数据状态会越来越多，并且这些数据状态有很多是服务端提供的，还有自己本地缓存的、本地生成没有持久化到服务端的数据，以及UI视图渲染的数据等等；

那么我们怎么才能更好的在不同的页面之间进行通讯管理数据呢？
其实，不使用 Redux 依然可以处理不同页面之间的数据通讯，但是 使用Redux 处理这些多页面，跨页面负责的数据状态管理，会更方便一些；

3、Redux 的三大核心

3.1、单一数据源；

整个应用的State 被存储在一个 Object tree 中，并且这个 Object tree 只存在于唯一的 store 中；

3.2、state 是只读的；

唯一修改state 的方法只能是触发 action，action是一个用于描述已发生事件的普通对象；

这样是为了保证视图操作，网络请求数据变更，不能直接去修改 state，只能表达他们将要修改state的意图，通知 action 函数，去集中处理，并且严格按照先后顺序一次执行；

store.dispatch({
    type:'MIN',
    num:2
})

3.3、使用纯函数来执行修改；

为了描述 action 如何改变 state tree，我们需要编写一个 reducers

Reducers 只是一些纯函数，它接收先前的state 和 action ，并且返回新的 state，
纯函数的特点：可以复用，可以控制执行顺序，可以传入附加参数；

4、Redux 的组成

4.1、State 状态

状态其实就是我们开发过程中页面之间传递的数据，大致分为以下三种
服务端返回的state，如：用户信息，列表详情
当前组件的状态 state，如：决定按钮现隐、组件之间切换的
全局控制的 state，如：路由导航守卫时候的信息状态，主题色的变更

4.2、Action 事件

action 是将数据从应用层 传递到 store 的载体，是 store的唯一数据源；通过 store.dispatch() 将 action 传递给 store
特点：
本质是一个js对象
必须包含 type 属性，多为常量，用于区分唯一性；
其他属性数据结构，可以视具体需求自定义；
只描述了有事情将要发生，并没有描述如何去更新 state；

// action
{
    type: 'USER_INFO',
    useInfo:{
        name: 'Adny',
        age: 18,
        job: '专业搬砖'
    }
}

更多的时候是使用 action 创建函数

function userInfo() {
    return {
        type: 'USER_INFO',
        useInfo:{
            name: 'Adny',
            age: 18,
            job: '专业搬砖'
        }
    }
}

4.3、Reducer

本质是一个纯函数
响应发送过来的 action
函数接收两个参数，第一个是初始化的 state，第二个是发送过来的 action
必须要有 return 返回值；

const initState = {...}
const useInfoReducer = (state=initState, action) => {
    return {
        ....
    }
}

请添加图片描述

4.4、Store

如上图 store 用于将 action 和Reducer 关联到一起；
通过 createStore 来构建 store
维持应用的 state
提供 getState() 来获取 最新的state
通过 subscribe() 来注册监听 state
通过 dispatch() 来发送action
通过 subscribe() 返回值来注销监听

import { creatStore } from 'redux'
const store = createStore('传递reducer')
store.dispatch({/*需要执行的逻辑**/})

React 之 Redux 第二十九节 Redux各项组成详解