Redux

笔记整理自这个视频，概念讲得挺清楚的，但是后面都是用class component举例

bilibili：链接

1. Redux概述

什么是Redux

Redux是一个用于JavaScript 状态容器，提供可与预测化的状态管理。 Redux可以让你构建一致化的应用，运行于不同的环境(客户端、服务器、原生应用)，并且易于测试。 Redux除了和React一起使用外，还支持其它界面库，而且它体小精悍(只有2kB)

Redux的设计初衷

随着JavaScript单页面发开日趋复杂，JavaScript需要管理更多的state(状态)，这些 state 可能包括服务器响应、缓存数据、本地生成未持久化到服务器的数据，也包括UI状态等。 管理不断变化的state非常麻烦，如果一个 model的变化会引起另一个 model变化，那么当view 变化时，就可能引起对应model以及另一个 model的变化，依次可能会引起另一个 view 的变化。所以就会产生混乱, 而Redux 就是为了去解决这个问题。

Redux三大核心

• 单一数据源

整个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一一个store中

截屏2023-06-11 上午1.16.16

• State是只读的

唯一改变state的方法就是触发 action，action是一个用于描述已发生事件的普通对象。

这样确保了视图和网络请求都不能直接去修改state，相反，它们只能表达想要修改的意图，因为所有的修改都被集中化处理，并且严格按照一个接一个的顺序执行

store.dispatch({type: 'COMPLETE_TODO',index: 1})

• 使用纯函数来执行修改

  • 为了描述 action 如何改变 state tree，你需要去编写reducers

  • Reducers只是一些纯函数，它接收先前的state和action，并且返回新的state。

  • 可以复用、可以控制顺序、传入附加参数

总结

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

2. redux三大核心

• 单一数据源头

• State是只读的

• 使用纯函数来执行修改

截屏2023-06-11 上午1.26.09

2. Redux 组成部分

State-状态

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

• DomainData:可以理解成为服务器端的数据，比如:获取用户的信息，商品的列表等等

• UI State:决定当前UI决定展示的状态，比如:弹框的显示隐藏，受控组件等等

• App State: App级别的状态，比如:当前是否请求loading，当前路由信息等可能被多个和组件去使用的到的状态

Action-事件

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

截屏2023-06-11 上午1.34.40

Action特点

• Action 的本质就是一个javaScript的普通对象

• Action 对象内部必须要有一个type属性来表示要执行的动作

• 多数情况下，这个type 会被定义成字符串常量

• 除了type 字段之外，action的结构随意进行定义

• 而我们在项目中，更多的喜欢用action创建函数(就是创建action的地方)

• 只是描述了有事情要发生，并没有描述如何去更新state

//action
{
	type: '字符串常量',
	info: {...},
	isLoading: true
	...
}

//action创建函数
function addAction(params){
	//返回一个action对象
	return {
		type: 'add',
		...params
	}
}

Reducer

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

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

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

截屏2023-06-11 上午1.39.35

Store

Store就是把action与reducer联系到一起的对象 主要职责:

• 维持应用的 state

• 提供 getState()方法获取state

• 提供 dispatch()方法发送action

• 通过 subscribe()来注册监听

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

import { ceateStore } from "redux";
const store = createStore(传递reducer);

总结

State状态

• DomainState:服务器返回的State

• UI State:关于当前组件的State

• APP State:全局的State

Action 事件

• 本质就是一个JS对象

• 必须要包含type属性

• 只是描述了有事情要发生，并没有描述如何去更新state

Reducer

• 本质就是函数

• 响应发送过来的 action

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

• 必须要有 return返回值

Store

• 用来把action和reducer关联到一起的

• 通过createStore来构建store

• 通过subscribe来注册监听

• 通过dispatch来发送action

Redux练习

bilibili：链接

找的前端小夏老师的讲解，用的是function components。

看P2：redux的基本操作，以下是笔记

目标：

redux的基本操作流程要烂熟于心。比如：如何获取状态？如何更新状态？什么是action？如何创建store。

什么是Store？

store是存放数据的仓库

const store = createStore(reducer);

什么是State？

仓库中存储的数据。如何获取state的快照？

store.getState()

什么是Action？

action就是一个对象

const action = {
    type: ‘ADD_ONE’,
    num: 1
}

什么是dispatch？

唯一能够更改当前state的方法

store.dispatch(action)

什么是reducer？

reducer是一个函数，用来返回一个新的state。

const reducer = (state = 10, action)=>{
    switch(action.type){
        case ‘ADD_ONE’:
            return state + action.num
    }
}