2024年Web前端最全Redux 入门学习笔记 ① —— 基本概念及使用，持续更新中

最新推荐文章于 2024-06-15 07:15:00 发布

原创最新推荐文章于 2024-06-15 07:15:00 发布 · 666 阅读

23 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #学习 #笔记

程序员专栏收录该内容

151 篇文章

订阅专栏

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer，也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容

③ 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) {

// …

最后

祝大家都能收获大厂offer~

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

篇幅有限，仅展示部分内容