Web前端最全Redux 入门学习笔记 ① —— 基本概念及使用，2024年web前端面试题及答案

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 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

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-SLX369FS-1715860968932)]

[外链图片转存中…(img-sWmp0eK5-1715860968932)]