正文

redux入门学习笔记①——基本概念及使用(代码片段)

SilamLin  SilamLin  2022-12-07  195

关键词：

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

Redux 架构
Redux的基本概念
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实现

树莓派学习笔记交叉编译概念及安装使用(代码片段)

一、交叉编译概念1、什么是交叉编译交叉编译：是在一个平台上生成另一个平台上的可执行代码。我们在windows上面编写C51代码，并编译成可执行代码，如xx.hex, ... 查看详情

spark基本概念及入门(代码片段)

sparkspark背景什么是sparkSpark是一种快速、通用、可扩展的大数据分析引擎，2009年诞生于加州大学伯克利分校AMPLab，2010年开源，2013年6月成为Apache孵化项目，2014年2月成为Apache顶级项目。目前，Spark生态系统已经发展成为一个包含... 查看详情

redis学习笔记[初识redis,学习常用的5种数据类型](代码片段)

...习,在B站找到了尚硅谷的redis教学视频->【尚硅谷】Redis6入门到精通超详细教程,进行学习记录文章目录🛴1.关于NoSql的概念引入🌈1.1NoSql概念🌈1.2行式数据库|列式数据库🛴2.Redis概述与安装使用🌈2.1基础知识... 查看详情

一周掌握flask框架学习笔记flask概念及基础(代码片段)

Flask概念及基础为什么要用Web框架Web应用程序的本质使用WEB框架的优点Flask简介：Flask与Django对比框架之间的差别Flask安装环境1、创建目录用来存放虚拟环境2、打开~/.bashrc文件，并添加如下：3、运行4、进入虚拟环境5... 查看详情

一周掌握flask框架学习笔记flask概念及基础(代码片段)

spring5学习笔记（10）—“jdbctemplate的概念及准备工作”(代码片段)

一、JdbcTemplate概述Spring框架对JDBC进行封装，使用JdbcTemplate方便实现对数据库操作；使用JdbcTemplate必须要导入的jar包：除了这三个之外我们还需要两个jar包：用于创建druid连接池和mysql连接二、准备工作1、导入上述... 查看详情

spring5学习笔记（10）—“jdbctemplate的概念及准备工作”(代码片段)

docker概念及基本用法

...基本用法。需要依次完成下面几项任务：理解Docker是什么学习如何在Linux上安装Docker学习如何使用DockerHub创建第一个HelloShiyanlou的Docker应用Docker基本的容器和镜像管理推荐阅读：深入浅入dockerdocker核心技术预览：http://www.infoq.com/cn... 查看详情

react入门学习（十四）--redux基本使用(代码片段)

📢大家好，我是小丞同学，一名大二的前端爱好者📢这篇文章是学习Redux的学习笔记📢非常感谢你的阅读，不对的地方欢迎指正🙏📢愿你忠于自己，热爱生活引言在了解了Antd组件库之后，... 查看详情

react入门学习（十四）--redux基本使用(代码片段)

day-6机器学习概念及应用

　　学习玩Python基础语法，今天开始进行机器学习，首先了解下机器学习和深度学习的一些基本概念和术语：　　　　1、机器学习概念及应用　　　　2、深度学习概念及应用　　　　3、机器学习基本术语及举... 查看详情

萌新笔记——cardinalityestimation算法学习（了解基数计算的基本概念及回顾求字符串中不重复元素的个数的问题）

...了“HyperLogLog”，从而引出了CardinalityEstimation算法，以及学习它时参考的一些文章：　　http://blog.codinglabs.org/articles/algorithms-for-cardinality 查看详情

react入门学习（十五）--react-redux基本使用(代码片段)

📢大家好，我是小丞同学，一名大二的前端爱好者📢这篇文章是学习React-Redux的学习笔记📢非常感谢你的阅读，不对的地方欢迎指正🙏📢愿你忠于自己，热爱生活引言在前面我们学习了Redux&#x... 查看详情

react入门学习（十五）--react-redux基本使用(代码片段)

机器学习一些基本概念及符号系统

...解，直到最终把一个符号或者公式的含义弄明白。在机器学习的过程中，也会碰到各种各样的符号，尤其是遇到多参数，多样本的情况时，更是让人眼花缭乱。最近学习完coursera上吴恩达的机器学习前两周的课程，有种豁然开朗... 查看详情

json基本概念及使用

...法。类似XML。JSON比XML更小、更快，更易解析。1.JSON数据基本类型JSON实际上是JavaScript的一个子集。在JSON中，一共就这么几种数据类型：number：和JavaScript的number完全一致；boolean：就是JavaScript的true 查看详情