Redux学习笔记-----基础部分
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,它所拥有的属性必是所有控件都拥有,这些属性都是控件最 ...
随机推荐
- winform代码生成器(二)
代码下载 地址 http://pan.baidu.com/s/1nuZjyat 接着说 上文继续说,这次我们要生成主从表. 此方用到了第三方的 控件 DevExpress 的Gridview .大家可 ...
- Linux配置JDK1.8环境变量
每次感觉配这个都很简单,但每次都要查一下,毕竟配错一点 后面都比较麻烦,记录一下,方便以后查看. linux 下安装jdk和windows下的安装是一样的,之前在windows安装的时候是先下载压缩 ...
- http状态码汇总及代表意思
成功2×× 成功处理了请求的状态码.200 服务器已成功处理了请求并提供了请求的网页.204 服务器成功处理了请求,但没有返回任何内容. 重定向3×× 每次请求中使用重定向不要超过 5 次.301 请 ...
- linux c 监控目录
static void* thread_monitor(void* args) { pthread_detach(pthread_self()); int fd; int wd; int len; i ...
- 避免Autoclose和Autoshrink选项
避免Autoclose和Autoshrink选项发布日期:2001年12月18日 问题:我在Microsoft SQL Server 2000资源工具包中读到了一个用于就应当避免使用的选项对所有数据库 ...
- lucene4.6版本配置
1.官网下载lucene的最新版本,解压后会看到很多文件,我们现在需要: E:\lucene-4.6.0\demo\lucene-demo-4.6.0.jar; E:\lucene-4.6.0\cor ...
- SAP C4C里如何实现Sales Unit和Seller的自动determination
先看一个效果,我录了一个视频,发布在视频网站上,大家可以先看看SAP Cloud for Customer里启用了partner 自动determination后的效果. 在SAP Cloud for ...
- python解析HTML之:PyQuery库的介绍与使用
本篇大部分转载于https://www.jianshu.com/p/c07f7cd1b548 先放自已自己解析techweb一个网站图片的代码 from pyquery import PyQuery ...
- POJ-1759 Garland---二分+数学
题目链接: https://cn.vjudge.net/problem/POJ-1759 题目大意: N个灯泡离地H_i,满足H1 = A ,Hi = (Hi-1 + Hi+1)/2 – 1,HN = ...
- Android(java)学习笔记3:线程的优先级
1. Java线程的优先级从1到10级别,值越大优先级越高线程默认优先级是5.值越大优先级越高 (1) 继承自Thread类创建线程类: package cn.itcast_04; public cl ...