Redux详解

本篇分享主要是作为笔记，记录一下redux的一些主要概念，和它们之间的关系。

一、Redux概述

1.1 什么是Redux

1. redux是一个用于JavaScript状态容器，提供可与预测化的状态。
2. redux可以让你构建一致化的应用，运行不同的环境（客户端，服务器，原生应用），并且易于测试。
3. redux除了与react一起使用外，还支持其他界面库，而且它体积小（只有2KB）

1.2 Redux的设计初衷

随着JavaScript单页面开发日趋复杂，JavaScript需要管理更多的state（状态），这些state可能包括服务器响应、缓存数据、本地生成未持久化到服务器的数据，也包括UI状态等。而redux是用来解决这些问题。

1.3 Redux 三大核心

1. 单一数据源------ 整个应用state被存储在一颗obect tree中，并且这个object tree只存于唯一一个store中
2. state是只读的---- 唯一改变state的方法就是厨房action,action是一个用于描述已发生事件的普通对象 (这样确保了视图和网络请求都不能直接去修改state,相反，它们只能表达想要修改的意图，因为所有的修改都被集中化处理，并且严格按照一个接一个的顺序执行)
3. 使用出函数来执行修改----为了描述action如何改变state tree，你需要去边写reducers（Reduceres只是一些纯函数，它接受先前的state和action，并且返回新的state,可以服用，可以控制顺序，传入时附加参数）
   

二、 Redux组成

1. State-状态 就是我们传递的数据，那么我们在用React开发项目的时候，大致可以把State分为三类:

DomainDate: 可以理解为服务器端的数据，比如获取用户信息，商品列表等
UI State： 决定当前UI 展示状态
App State：APP级别状态，比如当前是否请求loading,当前路由信息等可能被多个组件去使用的到的状态

2. Action-事件 Action是把数据从应用传到store的载体，它是store数据的唯一来源，一般来说，我们可以通过store.dispatch()将action传递给store

Action 特点：

1. Action的本质就是一个JavaScript的普通对象
2. Action对象的内部必须要有一个type属性来表示执行的动作
3. 多数情况下，这个type会被定义成字符串常量
4. 除了type字段之外，action的结构随意进行定义
5. 而我们在项目中，更多的喜欢用action创建函数
6. 只是描述了有事情要发生，并没有描述如何去更行state

3. Reducer 本质就是一个函数，它用来响应发送过来的actions，然后经过处理，把state发送给store

注意：在Reducer函数中，需要return返回值，这样store才能接收到数据
函数会接收两个参数，第一个参数是初始化，第二个参数是action

 const iniState = {...};
 rootReducer = (state = initState,action) => {... return {...}}

4. Store Store就是把action与reducer联系到一起的对象

主要职责：

1. 维持应用的state
2. 提供getState()方法获取state
3. 提供dispatch()方法发送action
4. 通过subscribe()来注册监听
5. 通过subscribe()返回值来注销监听

import { createStore } from "redux"
const store = createStore{ 传递reducer }

三、 关系图

本篇分享是自己的学习笔记，有问题可以提出一起讨论~