# react-router-redux

**Repository Path**: tramcctw/react-router-redux

## Basic Information

- **Project Name**: react-router-redux
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-11-12
- **Last Updated**: 2024-11-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-router

## path-to-regexp

**创建一个 match 对象**

第三方库：path-to-regexp，用于将一个字符串正则（路径正则，path regexp）

## history 对象

该对象提供了一些方法，用于控制或监听地址的变化。

该对象**不是**window.history，而是一个抽离的对象，它提供统一的 API 接口，封装了具体的实现

- createBrowserHistory 产生的控制浏览器真实地址的 history 对象
- createHashHistory 产生的控制浏览器 hash 的 history 对象
- createMemoryHistory 产生的控制内存中地址数组的 history 对象 移动端

history 对象共同的特点：维护了一个地址栈

第三方库：history

**以下三个函数，虽然名称和参数不同，但返回的对象结构(history)完全一致**

### history 对象

- action：当前地址栈，最后一次操作的类型
  - 如果是通过 createXXXHistory 函数新创建的 history 对象，action 固定为 POP
  - 如果调用了 history 的 push 方法，action 变为 PUSH
  - 如果调用了 history 的 replace 方法，action 变为 REPLACE
- push：向当前地址栈指针位置，入栈一个地址. 可以传递一个对象 {pathname:'',search:'',hash:'',}
- replace：替换指针指向的地址
- go：控制当前地址栈指针偏移，如果是 0，地址不变；如果是负数，则后退指定的步数；如果是正数，则前进指定的步数；action 不变
- length：当前栈中的地址数量
- goBack：相当于 go(-1)
- goForward：相当于 go(1)
- location：表达当前地址中的信息
- listen：函数，用于监听地址栈指针的变化。 用于渲染界面的关键 跳转之后触发
  - 该函数接收一个函数作为参数，该参数表示地址变化后要做的事情
    - 参数函数接收两个参数
    - location：记录了新的地址
    - action：进入新地址的方式
      - POP：指针移动，调用 go、goBack、goForward、用户点击浏览器后退按钮
      - PUSH：调用 history.push
      - REPLACE：调用 history.replace
  - 该函数有一个返回值，返回的是一个函数，用于取消监听
- block：用于设置一个阻塞，当页面发生跳转时，会将指定的消息传递到 getUserConfirmation，并调用 getUserConfirmation 函数。跳转之前
  - 该函数接收一个字符串作为参数，表示消息内容，也可以接收一个函数作为参数，函数的返回值是消息内容（loaction,action）=> msg
  - 该函数返回一个取消函数，调用取消函数可以解除阻塞
- createHref：basename+url (location) => 一个完整的路径

## createBrowserHistory

创建一个使用浏览器 History Api 的 history 对象

配置对象：

- basename：设置根路径。 跳转后自动加上根路径
- forceRefresh：地址改变时是否强制刷新页面
- keyLength：location 对象使用的 key 值长度。默认是 6。location key 属性的长度。
  - 地址栈中记录的并非字符串，而是一个 location 对象，所以可能有几个 location 长的一样，需要用独一无二的 key 值进行区分
- getUserConfirmation：一个函数，该函数当调用 history 对象 block 函数后，发生页面跳转时运行。
  - 参数一。 msg block 传递的 msg
  - 参数二。 callback。 决定是否跳转， callback(true) 表示跳转 false 表示不跳转

## createHashHistory

创建一个使用浏览器 hash 的 history 对象

配置对象：

- hashType：#号后给定的路径格式
  - hashbang：被 chrome 弃用，#!路径
  - noslash：#a/b/c
  - slash：#/a/b/c。默认

## createMemoryHistory。

创建一个使用内存中的地址栈的 history 对象，一般用于没有地址栏的环境。移动端。不再维护地址栏。即地址栏不变

配置对象：详见 memoryHistory.js

# redux

## MVC

传统的服务器端的 MVC

![alt text](./assets/image-1.png)

环境：

1. 服务端需要响应一个完整的 HTML
2. 该 HTML 中包含页面需要的数据
3. 浏览器仅承担渲染页面的作用
4. 以上的这种方式叫做服务端渲染，即服务器端将完整的页面组装好之后，一起发送给客户端。

服务器端需要处理 UI 中要用到的数据，并且要将数据嵌入到页面中，最终生成一个完整的 HTML 页面响应。
为了降低处理这个过程的复杂度，出现了 MVC 模式。

![alt text](./assets/image-2.png)

- Controller: 处理请求，组装这次请求需要的数据
- Model：需要用于 UI 渲染的数据模型
- View：视图，用于将模型组装到界面中

## 前端 MVC 模式的困难

React 解决了 数据 -> 视图 的问题

1. 前端的 controller 要比服务器复杂很多，因为前端中的 controller 处理的是用户的操作，而用户的操作场景是复杂的。
2. 对于那些组件化的框架（比如 vue、react），它们使用的是单向数据流。若需要共享数据，则必须将数据提升到顶层组件，然后数据再一层一层传递，极其繁琐。 虽然可以使用上下文来提供共享数据，但对数据的操作难以监控，容易导致调试错误的困难，以及数据还原的困难。并且，若开发一个大中型项目，共享的数据很多，会导致上下文中的数据变得非常复杂。

### 前端需要一个独立的数据解决方案

#### Flux

Facebook 提出的数据解决方案，它的最大历史意义，在于它引入了 action 的概念
action 是一个普通的对象，用于描述要干什么。**action 是触发数据变化的唯一原因**
store 表示数据仓库，用于存储共享数据。还可以根据不同的 action 更改仓库中的数据

示例：

```js
var loginAction = {
  type: "login",
  payload: {
    loginId: "admin",
    loginPwd: "123123",
  },
};

var deleteAction = {
  type: "delete",
  payload: 1, // 用户id为1
};
```

#### Redux

在 Flux 基础上，引入了 reducer 的概念
reducer：处理器，用于根据 action 来处理数据，处理后的数据会被仓库重新保存。
基本概念图
![alt text](./assets/image.png)