2.Redux学习2----redux-thunk
UI组件:只展示UI,不处理业务逻辑,又称傻瓜组件,因为只需要展示UI,没有状态,我们通常用函数组件(无状态组件)作为UI组件
容器父组件:只处理业务逻辑,不展示UI,又称聪明组件
redux-thunk中间件:中间件是指在action与store之间实现某种功能的插件,thunk插件可以让异步操作的代码写在aciton中,而不必写在组件生命周期里。
转至https://www.jianshu.com/p/1fb1299e4058
1.先安装redux-thunk依赖
npm install redux-thunk
yarn add redux-thunk
redux-thunk的GitHub网址 : https://github.com/reduxjs/redux-thunk
2.接下来我们要引入配置redux-thunk这个中间件参考上面GitHub的网址上的文档
3.打开store文件夹下的index文件引入redux-thunk和配置redux开发者工具
import { createStore , applyMiddleware , compose } from "redux";
import reducer from "./reducer";
import thunk from 'redux-thunk'; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(thunk)
);
const store = createStore(reducer,enhancer);
export default store;
4.配置好后我们把组件里的异步代码移除,把异步代码移除到action中去
5.接下来我们打开actionCreators.js,当我们引用了Redux-thunk后action可以是一个函数
之前的action都是返回一个对象,现在可以用Redux-thunk返回一个函数
代码如下:
export const getTodoList = () => {
return () => {
axios.get('http://yapi.demo.qunar.com/mock/38353/app')
.then((res) =>{
const data = res.data;
})
.catch(() =>{alert('err')})
}
}
6.此时我们发现getTodoList这个函数该怎么调用呢
7.接下来我们就要返回到TodoList这个组件中去调用,首先引入这个方法
import { getInputChangeAction , getAddItemAction , getDeletItemAction ,getTodoList} from './store/actionCreators.js';
8.然后我们在componentDidMount这个生命周期函数中引用getTodoList这个函数 代码如下 : componentDidMount() {
// 此时action是一个函数,这个函数中有请求数据的异步操作
const action = getTodoList()
// dispatch是派发action给store,若没有thunk中间件,action就必须是对象,发送函数会报错
// 有个thunk,作为一个中间件,判断是函数,就会先把action函数执行,而不是直接派发给store
// 用thunk好像变复杂了,但目的是为了将异步请求放到aciton中处理,而不是生命周期中,因为一旦业务逻辑很多的时候,这么写非常简洁
// 放在action中也更便于自动化测试
store.dispatch(action)
}
9.接下来我们返会到actionCreators.js中编写异步代码记得引入axios的包
import axios from 'axios';
10.那store中的List数据应该怎么改变呢,此时我们又要发送action啦代码如下:
const action = initListAction(data)
11.我们发现actionCreators并没有store的dispatch方法,当调用getTodoList时会生成一个内容似的函数时,这个函数能接收到stored的dispatch方法,我们直接调用dispatch法方就可以了 代码如下
export const getTodoList = () => {
return (dispatch) => {
axios.get('http://yapi.demo.qunar.com/mock/38353/app')
.then((res) =>{
const data = res.data;
const action = initListAction(data)
dispatch(action);
})
.catch(() =>{alert('err')})
}
}
原理:实际上thunk就是对dispatch方法做了封装,扩展了功能,使其可以进行异步操作
2.Redux学习2----redux-thunk的更多相关文章
- Redux 学习(1) ----- Redux介绍
Redux 有三个基本的原则: 1,单一状态树,redux 只使用一个javascript 对象来保存整个应用的状态. 状态树样式如下: const state = { count: 0 } 2,状态 ...
- redux学习
redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store. ...
- React Redux学习笔记
React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性 ...
- React+Redux学习笔记:React+Redux简易开发步骤
前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...
- redux学习总结
redux学习总结 *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !imp ...
- Redux学习及应用
Redux学习及应用 一:Redux的来源? Redux 是 JavaScript 状态容器,提供可预测化的状态管理.Redux是由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂 ...
- Redux学习之我对于其工作流程的理解和实践
目录 1 工作流程图 2 各部位职责 3 Demo 1 工作流程图 2 各部位职责 我在理解这个流程图的时候,采用的是一种容易记住的办法,并且贴切实际工作职责. 我们可以把整个Redux工 ...
- 读redux有感: redux原来是这样操作的。
2017.9.10日 教师节 : ~当一个事物你没有接触,但是生活中 常常用到他,你就不得不去了解他了. 注:新手可以看一下,毕竟博主也是个菜鸟,没法写高深的东西,不想看博主扯淡的直接看第三节啦~~ ...
- react第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构)
第十八单元(redux中间件redux-thunk,redux工程目录的样板代码,规范目录结构) #课程目标 中间件:中间件增强redux的可扩展性,实现功能复用的目的. redux-thunk异步逻 ...
- Redux学习之解读applyMiddleware源码深入middleware工作机制
随笔前言 在上一周的学习中,我们熟悉了如何通过redux去管理数据,而在这一节中,我们将一起深入到redux的知识中学习. 首先谈一谈为什么要用到middleware 我们知道在一个简单的数据流场景中 ...
随机推荐
- split分割(拆分)文件
split分割(拆分)文件 需求:指定文件大小拆分文件 # ll -h test/ |grep vmcore -rw-r--r-- 1 root root 12G 12月 7 00:20 vmco ...
- CMSdede后台登陆界面设计
1 在这里我就公布 css 和jq 也就是dede文件下templets的login.htm页面:代码如下 $(function () { $(".tex ...
- mysql那些事(4)建库建表编码的选择
mysql建数据库或者建表的时候会遇到选择编码的问题,以前我们都是习惯性的选择utf8,但是在mysql在5.5.3版本后加了utf8mb4的编码,utf8mb4可以存4个字节Unicode,mb4就 ...
- requests库核心API源码分析
requests库是python爬虫使用频率最高的库,在网络请求中发挥着重要的作用,这边文章浅析requests的API源码. 该库文件结构如图: 提供的核心接口在__init__文件中,如下: fr ...
- ThinkPHP5入门(基础篇)
ThinkPHP是一个快速.简单的基于MVC和面向对象的轻量级PHP开发框架,自2006年诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简代码的同时,尤其注重开发体验和易用性,并且拥有众多的 ...
- 不给糖果就捣乱,用Python绘制有趣的万圣节南瓜怪【华为云分享】
关于万圣节 万圣节又叫诸圣节,在每年的11月1日,是西方的传统节日:而万圣节前夜的10月31日是这个节日最热闹的时刻.在中文里,常常把万圣节前夜(Halloween)讹译为万圣节(All Saints ...
- 失去循环标记的Python,我这样实现跳出外层循环
不完美的Python 自从各类Python大火,感觉天上地下哪儿都有Python的一席之地,Python功夫好啊-但python有些细节上缺少其他语言的便利.今天我们就来举几个例子. 跳出外层循环 大 ...
- HDU3032 Nim or not Nim?(Lasker’s Nim游戏)
Nim or not Nim? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)T ...
- 2019ICPC 上海网络赛 G题 Substring(哈希)
题意: 给了一个母串S, 每次循环给了一个模板串,问模板串在母 串中“匹配”了多少次?“匹配”的意思就是首字母和尾字母一样, 中间字母顺序可以换. 题解: 字符串hash.我们将询问字符串的首尾特殊h ...
- SPOJ Free TourII(点分治+启发式合并)
After the success of 2nd anniversary (take a look at problem FTOUR for more details), this 3rd year, ...