Redux的基本原则
- 唯一数据源(应用的状态数据应该只存储在唯一的一个store上);
- 保持状态只读(不能直接修改Store的状态,而是应该通过派发一个action对象来完成)
- 数据改变只能通过纯函数完成(函数的返回结果必须完全由参数state和action决定)
Action
Action是store数据的唯一来源。需使用store.dispatch()将所需的action传到store。Action是把服务器响应的数据或者用户输入的数据、和其他一些非View的数据传入store的有效载荷。Action实际上是JS的普通对象。示例:
{
type:"ADD_TODO", //type为必须的字段,值为字符串或存放字符串的变量
text:"我是示例"
}
需要注意的是:应该尽可能的减少在action中传递的数据。
Action创建函数
Action创建函数只是简单的返回一个action。示例:
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
Redux提供的bindActionCreators()可以自动把多个action创建函数绑定到dispatch()方法上。
Reducer
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的,记住 actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。
reducer 就是一个纯函数,接收旧的 state 和 action,返回新的 state。
(previousState, action) => newState
永远不要在reducer里做这些操作:
- 修改传入参数;
- 执行有副作用的操作,如API请求和路由跳转;
- 调用非纯函数,如Data.now()或Math.random();
reducer一定要保持纯净。只要传入参数相同,返回计算得到的下一个state就一定相同。没有特殊情况、没有副作用、没有API请求、没有变量修改,单纯执行计算
//ES6的写法
import { combineReducers } from 'redux'
import * as reducers from './reducers' const todoApp = combineReducers(reducers)
Store
Store的职责:
- 维持应用的state;
- 提供 getState() 方法来获取state;
- 提供 dispatch(action) 方法更新state;
- 通过 subscribe(listener) 注册监听器;
- 通过 subscribe(listener) 返回的函数注销监听器;
Redux 应用只有一个单一的 store
store的使用示例:
//创建store
let store = createStore(todoApp);
//打印初始状态
console.log("初始状态======》",store.getState()); //每次state更新时,打印日志
//注意subscribe()返回一个函数用来注销监听器
const unsubscribe = store.subscribe(()=>console.log("state有更新=======》",store.getState())) //发起一系列action
store.dispatch(addTodo("learn about actions"));
store.dispatch(addTodo("learn about reducers"));
store.dispatch(addTodo("learn about store"));
store.dispatch(toggleTdo(0));
store.dispatch(toggleTdo(1));
store.dispatch(setVisibilityFilter(VisibilityFilters.SHOW_COMPLETED)); //停止监听
unsubscribe();
数据流
Redux应用中数据的生命周期遵循4个步骤:
- 调用 store.dispatch(action) 。 action 就是一个描述“发生了什么”的普遍对象,可将其理解为通过 store.dispatch 来告诉reducer发生了什么
- Redux store调用传入的reducer函数。根据传入的action.type来更新state
- 根reducer应该把多个子reducer输出合并成一个单一的state树。可使用原生的 combineReducers() 辅助函数,也可自己实现
- Redux store保存了根reducer返回的完整的state树
React-Redux
connect():生成容器组件;
mapStateToProps():指定如何把当前Redux Store state映射到展示组件的props中。示例:
//VisibleTodoList 需要计算传到 TodoList 中的 todos,
//所以定义了根据 state.visibilityFilter 来过滤 state.todos 的方法,并在 mapStateToProps 中使用 const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
case 'SHOW_ALL':
default:
return todos
}
} const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
mapDispatchToProps():接受dispatch()方法并返回期望注入到展示组件的props中的回调方法。示例:
//VisibleTodoList 向 TodoList 组件中注入一个叫 onTodoClick 的 props ,
//并且onTodoClick 能分发 TOGGLE_TODO 这个 action const mapDispatchToProps = dispatch => {
return {
onTodoClick: id => {
dispatch(toggleTodo(id))
}
}
}
Redux的整体流程:
- 将action传入dispatch()来触发reducer
- reducer响应action,并根据action.type来处理旧的state数据,然后返回新的state数据,将新的state数据发送到store
- store保存reducer返回的新的state,然后所有订阅 store.subscribe(listener) 的监听器都将被调用,以此来创建容器组件.(在react-redux中我们使用connect()方法来生成,所以不用手写 store.subscribe() 来生成容器组件)
Redux学习笔记-----基础部分的更多相关文章
-
Redux学习笔记-基础知识
Redux概述 是什么:Redux是管理状态的容器,提供可预测的状态管理. 怎么做:Redux主要是用来管理组件或者应用的状态,本质上跟一个事件处理器差不多.通过分发action触发reduce来 ...
-
jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
-
Python学习笔记基础篇——总览
Python初识与简介[开篇] Python学习笔记——基础篇[第一周]——变量与赋值.用户交互.条件判断.循环控制.数据类型.文本操作 Python学习笔记——基础篇[第二周]——解释器.字符串.列 ...
-
React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
-
数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
注:转载本文须标明出处. 原文链接https://www.cnblogs.com/zhouzhendong/p/Number-theory.html 数论算法 剩余系相关 学习笔记 (基础回顾,(ex ...
-
《python基础教程(第二版)》学习笔记 基础部分(第1章)
<python基础教程(第二版)>学习笔记 基础部分(第1章)python常用的IDE:Windows: IDLE(gui), Eclipse+PyDev; Python(command ...
-
React Redux学习笔记
React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...
-
Java学习笔记——基础篇
Tips1:eclipse中会经常用到System.out.println方法,可以先输入syso,然后eclipse就会自动联想出这个语句了!! 学习笔记: *包.权限控制 1.包(package) ...
-
iOS学习笔记——基础控件(上)
本篇简单罗列一下一些常用的UI控件以及它们特有的属性,事件等等.由于是笔记,相比起来不会太详细 UIView 所有UI控件都继承于这个UIView,它所拥有的属性必是所有控件都拥有,这些属性都是控件最 ...
随机推荐
-
(转) How to Train a GAN? Tips and tricks to make GANs work
How to Train a GAN? Tips and tricks to make GANs work 转自:https://github.com/soumith/ganhacks While r ...
-
VMware Workstation 12 Pro 之安装Windows10 EP系统
VMware Workstation 12 Pro 之安装Windows10 EP系统... --------------- 先准备好要用的Win10的镜像文件ISO ---------------- ...
-
java购物车系统 团队博客
1. 团队名称.团队成员介绍(需要有照片) 团队名称:一颗LFL 团队成员:廖余俊 计算机工程学院网络工程1512 学号201521123053 方旭 计算机工程学院网络工程1512 学号201521 ...
-
deeplearning.ai 构建机器学习项目 Week 2 机器学习策略 II 听课笔记
1. 误差分析(Error analysis) 误差分析的目的是找到不同误差源的比重,从而指引我们接下来往哪个方向努力改进.NG建议手工统计随机100个错误的误差源,比如对于猫分类器,错误的照片可能是 ...
-
Linux 包管理
1 文集 <Linux 包管理基础:apt.yum.dnf 和 pkg>,由Snapcrafter翻译,英文原创(作者Brennen)地址在这里. 这是一篇不错的概括性的文章,系统介绍了D ...
-
mysql批量替换数据
如题,项目域名迁移,导致原来商城的商品图片无法查看,地址错误. 怎么办?修改数据库图片路径呗!什么几千行呐,开玩笑.这个任务没人接,只有我干咯! 怎么也得不少时间吧,好吧半天,这是上面的要求. 有聪明 ...
-
docker的常用命令汇总
1================================================================================ docker 列出每个容器的IP ...
-
Atitit js canvas的图像处理类库attilax总结与事业
Atitit js canvas的图像处理类库attilax总结与事业 1.1. 脸部识别JavaScript类库Tracking.js1 1.2. AlloyImage特性1 1.3. CamanJ ...
-
Delphi 10 Seattle 小票打印控件TQ_Printer
TQ_Printrer控件,是一个为方便需要控制打印命令而设计的跨平台专用控件,已包含标准ESC/POS打印控制的基本指令在内(这些基本指令已能很好的满足多数项目使用). TQ_Printrer控件让 ...
-
8、Android---探究服务
8.1.服务是什么 服务(Service)是Android中实现程序后台运行的解决方案 非常适合执行那些不需要和用户交互而且要求长期的任务 服务的运行不依赖于任何用户界面 即使程序被切换到后台 或者用 ...