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

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 函数，去集中处理，并且严格按照先后顺序一次执行；

javascript 复制代码

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；

javascript 复制代码

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

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

javascript 复制代码

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

4.3、Reducer

本质是一个纯函数

响应发送过来的 action

函数接收两个参数 ，第一个是初始化的 state ，第二个是发送过来的 action

必须要有 return 返回值；

javascript 复制代码

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

4.4、Store

如上图 store 用于将 action 和Reducer 关联到一起；

通过 createStore 来构建 store

维持应用的 state

提供 getState() 来获取 最新的state

通过 subscribe() 来注册监听 state

通过 dispatch() 来发送action

通过 subscribe() 返回值来注销监听

javascript 复制代码

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