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();

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！