# react-redux

**Repository Path**: codinglin/react-redux

## Basic Information

- **Project Name**: react-redux
- **Description**: redux全局状态管理学习路线之一 : redux&react-redux
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-07-10
- **Last Updated**: 2024-01-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, Redux

## README

# Redux 概述

1. redux 是一个 JavaScript 容器，用于进行全局的状态管理

2. redux 三大核心
  - 单一数据源头
    - 整个应用的 `state` 被存储在一颗 `object tree` 中，并且这个 `object tree` 只存在于唯一一个 `store` 中
    ![单一数据源](./1.png)
      
  - State 是只读的
    - 唯一改变 `state` 的方法就是触发 `action`，`action` 是一个用于描述已发生事件的普通对象
  - 使用纯函数来执行修改
    - 为了描述 `action` 如何改变 `state tree`，你需要去编写 `reducers`

# Redux 组成
    
1. State-状态
  就是我们传递的**数据**，`State` 大致可以分为三类：
    - DomainDate：可以理解成服务器端的数据，比如获取用户信息、商品列表等。
    - UI State：决定当前 UI 决定展示的状态，比如弹框的显示隐藏、受控组件等。
    - App State：App级别的状态，比如当前是否请求 loading，当前路由信息等可能被多个和组件去使用的到的状态。

2. Action-事件
  **Action** 是把数据从应用传到 `store` 的载体，它是 `store` 数据的唯一来源，一般来说，我们可以通过 `store.dispatch()` 将 `action` 传递给 `store`
  **Action** 特点：
    - Action 的本质就是一个 javascript 对象
    - Action 对象的内部必须要有一个 `type` 属性来表示要执行的动作
    - 多数情况下，这个 `type` 会被定义为字符串常量，除 `type` 字段之外，`action` 的结构随意进行定义

3. Reducer
  Reducer 本质就是一个**函数**，它是用来响应发送过来的 `actions`，然后经过处理，把 `state` 发送给 `Store` 的
  注意：在 Reducer 函数中，需要 **return 返回值**，这样 Store 才能接收到数据，函数会接收两个参数，第一个参数是初始化 `state`，第二个参数是 `action`

4. Store
  **Store** 就是把 action 与 reducer 联系到一起的对象
  主要职责：
    - 维持应用的 `state`
    - 提供 `getState()` 方法获取 `state`
    - 提供 `dispatch()` 方法发送 `action`
    - 通过 `subscribe()` 来注册监听
    - 通过 `subscribe()` 返回值来注销监听

# React-redux 概述

**react-redux** 就是 Redux 官方出的 用于配合 React 的绑定库

**react-redux** 能够使你的 React 组件从 Redux store 中很方便的读取数据，并且向 store 中分发 actions 以此来更新数据

## React-Redux 中的两个重要的成员

1. Provider 这个组件能够使你整个 app 都能获取到 store 中的数据
  - Provider 包裹在根组件的最外层，使所有的子组件都可以拿到 State
  - Provider 接收 `store` 作为 `props`，然后通过 `context` 往下传递，这样 react 中任何组件都可以通过 `context` 获取到 `store`

2. connect 这个方法能够使组件跟 store 来进行关联
  - Provider 内部组件如果想要使用到 `state` 中的数据，就必须要 `connect` 进行一层包裹封装，换一句话来说就是必须要被 `connect` 进行加强
  - `connect` 就是方便我们组件能够获取到 `store` 中的 `state`