Redux 入门学习笔记 ① —— 基本概念及使用

Posted 2021-08-15 Kabukiyo Lin

Redux 入门学习笔记 ① —— 基本概念及使用

• Redux 架构
• Redux的基本概念
• • ① Store
  • ② State
  • ③ Action
  • ④ Action Creator
  • ⑤ 发布Action —— store.dispatch()
  • ⑥ 处理Action —— Reducer
  • ⑦ store.subscribe()
• Redux 小结
• *** createStore实现

近期参与新的项目组，跟着学习。我是第一天接触Redux，所以做一个学习笔记，记录相关的个人理解便于学习。

部分内容是参考阅读阮一峰老师的文章：Redux 入门教程（一）：基本用法 后，记录下的个人理解和想法。

Redux 架构

两句话概况：

• Web应用是一个状态机，视图view与状态state一一对应
• 所有的状态state，都保存在一个对象里

Redux的基本概念

① Store

• 整个Web应用只有一个Store
• Store相当于一个容器，一个保存数据的容器。它保存了所有数据
• createStore函数可以创建Store：接受一个函数作createStore的参数，并返回新生成的Store

import { createStore } from 'redux';
const store = createStore(fn);

② State

• 上面说过，Store保存Web应用的所有数据。
• 某一时刻的数据集合，叫作State
• 可以通过store.getState()方法，获得当前时刻的数据集合，即获得State
• 一个State与一个View一一对应。只要知道State，就可以知道View；只要知道View，就知道State

import { createStore } from 'redux';
const store = createStore(fn);
const state = store.getState();

③ Action

• State与View一一对应。用户无法接触到State，只能接触到View。所以只能通过View来引起State的变化。
• View发出通知，即Action(当前发生的事情)，告诉State要发生变化

const action = {
	type:'ADD_TODO',
	payload:'Learn Redux'
}

总结:

• Action是一个对象：type属性表示其名称，payload是其携带的信息。
• Action描述当前发生的事情，是View发出的通知。
• View发出Action，是改变State的唯一办法。

④ Action Creator

• View发出Action，是改变State的唯一办法
• 要发出多少种通知/消息，那就相应有多少个Action。一个一个写太麻烦，所以用Action Creator函数来生成Action

function actionCreator(type,text){
	return {
		type:type,
		text:text
	}
}
const action = actionCreator('ADD_TODO','Learn Redux');

⑤ 发布Action —— store.dispatch()

• View发出Action是改变State的唯一办法
• 那么，store.dispatch()则是View发出Action的唯一方法

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
	type:'ADD_TODO',
	payload:'Learn Redux'
})

⑥ 处理Action —— Reducer

• 当Store收到Action，则需要给出一个新的State
• 给出新的State，才能更新View （State和View一一对应）
• Reducer是一个函数，根据Action和当前State，计算返回一个新的State

const reducer = function (state, action) {
  // ...
  return new_state;
};

• store.dispatch()方法用于View发出Action，那么它可以触发Reducer的自动执行。
• 需要让store知道这个Reducer，所以把Reducer传入createStore（fn）中的fn

import { createStore } from 'Redux';
const store = createStore(reducer);

⑦ store.subscribe()

• store.subscribe()设置监听函数，一旦State发生变化，自动执行函数。
• store.subscribe()会返回一个函数，用于解除监听

import { createStore } from 'redux';
const store = createStore(reducer);

let unsubscribe = store.subscribe(listener);
unsubscribe();

Redux 小结

Store：

• 一个Web应用只有一个Store，而Store存储了所有的数据。
• 通过 createStore(fn) 创建Store，其中fn应该是Reducer函数。

State：

• State是某一时刻的数据集合，通过 store.getState() 快照获取。
• State与View一一对应：知道State就知道View，知道View就知道State。

Action：

• Action是一个对象，type属性表示其名称，payload是其携带的信息。
• 用户无法接触State，只能通过View发出Action，从而改变State，这是改变State的唯一办法。
• Action Creator 可以方便地创建Action，避免一个个手写。
• store.dispatch() 是View发出Action的唯一方法

Reducer：

• Store接收到View发出的Action，得知需要更新一个State，从而能够更新View。
• Reducer被store.dispatch自动触发。根据发出的Action和当前State，计算返回一个新的State。

subscribe：

• store.subscribe() 设置监听函数，一旦State发生变化，自动执行函数。
• store.subscribe()会返回一个函数，用于解除监听

简单来说：

• createStore（Reducer）创建Store
• store.getState() 获得当前时刻State
• store.dispatch() View发出Action，通知Store需要改变State，从而改变View
• Reducer() 根据Action和当前State，计算后返回一个新的State
• store.subscribe() 设置监听函数，当State发生变化，则自动执行

*** createStore实现