3.Redux学习3----redux-saga
redux-saga和redux-thunk功能差不多,都是为了避免直接在组件生命周期函数中做异步操作,便于自动化测试,便于拆分管理。
首先要下包
npm i redux-saga
第零步:在actionCreators中,创建一个action的函数,这个action无需value,只需要一个类型就可
export const getInitList = () => ({
type:GET_INIT_LIST
})
第一步:todolist.js容器组件中创建一个aciton,派发action
注意此时,因为没有配置saga中间件,若是直接执行,就是直接将aciton派发给store然后是reducer
componentDidMount(){
const action = getInitList()
store.dispatch(action)
}
只有配置了saga中间件,aciton派发后,saga中间件才会先接受到action,所以接下来第二就是配置saga中间件
第二步:在index.js中引入包,并配置saga中间件
import {applyMiddleware, createStore,compose} from "redux"
import reducer from "./reducer"
import createSagaMiddleware from 'rdux-saga' const sagaMiddleware = createSagaMiddleware()
// 配置redux开发者工具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
// 配置rdux-saga中间件
const enhancer = composeEnhancers(
applyMiddleware(sagaMiddleware)
);
const store = createStore(
reducer,
enhancer
) export default store
但是配置完了saga中间件,却并没有告诉saga是如何处理传递过来的action的。
第三步:创建sagas.js文件,这个文件就是写saga中间件处理逻辑的回调函数,所以还需在index.js中引入和配置这个处理逻辑的回调函数
import {applyMiddleware, createStore,compose} from "redux"
import reducer from "./reducer"
import createSagaMiddleware from 'redux-saga'
import todoSagas from './sagas' const sagaMiddleware = createSagaMiddleware()
// 配置redux开发者工具
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose
// 配置rdux-saga中间件
const enhancer = composeEnhancers(
applyMiddleware(sagaMiddleware)
);
// 在store创建时候,配置上
const store = createStore(
reducer,
enhancer
)
// 当有action派送过来时,用todoSagas函数进行处理
sagaMiddleware.run(todoSagas) export default store
第四步:回到sagas.js文件来,写处理action,做异步操作的逻辑,这里就是异步获取数据,并再创建一个action,将数据存入action通过put派发,给reducer处理
// 注意takeEvery,put的导入目录问题
import {initListAction} from "./actionCreators"
import {GET_INIT_LIST} from "./actionTypes"
import {takeEvery,put} from "redux-saga/effects"
import axios from 'axios'
// generator函数
function* mySaga() {
// 当要处理的action的type是GET_INIT_LIST的时候,调用getInitList函数
yield takeEvery(GET_INIT_LIST, getInitList)
} // generator函数
function* getInitList() {
// 等待异步操作完成获取数据
const res = yield axios.get('/list.json')
// 再创建一个action
const action = initListAction(res.data)
// put和dispatch功能相同,派发数据给store-》再给reducer处理
yield put(action)
} export default mySaga;
第五步:reducer接收action,更新state中的list数据返回给store
import {CAHNGE_INPUT_VALUE, ADD_TODOS_ITEM, DELETE_TODOS_ITEM, INIT_LIST} from "./actionTypes"
const defaultState = {
inputValue: "",
list: []
}
//注意reducer只能复制state不能修改,不能直接修改state
export default (state=defaultState,action)=>{
if(action.type === CAHNGE_INPUT_VALUE){
let newState = JSON.parse(JSON.stringify(state))
newState.inputValue = action.value
return newState
}
if(action.type === ADD_TODOS_ITEM){
let newState = JSON.parse(JSON.stringify(state))
newState.list.push(newState.inputValue)
newState.inputValue = ""
return newState
}
if(action.type === DELETE_TODOS_ITEM){
let newState = JSON.parse(JSON.stringify(state))
newState.list.splice(action.index,1)
return newState
}
if(action.type === INIT_LIST){
let newState = JSON.parse(JSON.stringify(state))
newState.list = action.data
return newState
}
return state
}
比较下:saga和thunk, saga比较复杂一下,
thunk是将异步请求的代码放在actionCreators.js中管理,仅仅是将action扩展成为函数,没什么api较简单
saga更彻底些,把异步操作放在一个单独的文件中管理,api较多,复杂
saga用于复杂大型项目更便于管理,一般项目用thunk就足够了
3.Redux学习3----redux-saga的更多相关文章
- 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异步逻 ...
- React之redux学习日志(redux/react-redux/redux-saga)
redux官方中文文档:https://www.redux.org.cn/docs/introduction/CoreConcepts.html react-redux Dome:https://co ...
随机推荐
- .net压缩文件
首先nuget安装DotNetZip 代码很少
- python_MySQL数据库
MySQL数据库的特点: 1.是关系型数据库 关系型数据库的特点 1.数据是以行和列的的形式存储的 2.这一系列的行和列称为表 ...
- 【跟唐老师学习云网络】 - 第7篇 Tcpdump大杀器抓包
[摘要] 前面章节的网络协议栈相关的信息建议大家多学习一遍,因为这些都是最基础的东西,想玩好云网络必备基本功.. 一.上帝视角 之前提到过定位问题可以开启上帝视角,那么如何开启就要依靠tcpdump这 ...
- 简单实现jquery轮播图
首先需要定义个切换图片的funcation ##### 1.找到图片所在li,将其显示出来,并缩放1.1倍 ##### 2.其他兄弟li,渐变隐藏,并还原至原大小比例 ##### 3.将底部的圆点列表 ...
- KVM http网络加载镜像报错(mount: wrong fs type, bad option, bad superblock on /dev/loop0)
curl: (23) Failed writing body (7818 != 16384)loop: module loadeddracut-initqueue[579]: mount: wrong ...
- Preact(React)核心原理详解
原创: 宝丁 玄说前端 本文作者:字节跳动 - 宝丁 一.Preact 是什么 二.Preact 和 React 的区别有哪些? 三.Preact 是怎么工作的 四.结合实际组件了解整体渲染流程 五. ...
- universal link使用
iOS9之后,苹果推出了universal link方案,该方案较url scheme有明显的改善.url scheme很难做到唯一. 而 universal link却是你自己控制的. 1.有一个H ...
- 利用python进行微信好友分析
欢迎python爱好者加入:学习交流群 667279387 本文主要利用python对个人微信好友进行分析并把结果输出到一个html文档当中,主要用到的python包为itchat,pandas,py ...
- [TimLinux] Python 再谈装饰器
参考链接:https://stackoverflow.com/questions/739654/how-to-make-a-chain-of-function-decorators 1. 函数对象 能 ...
- UVA-156
Most crossword puzzle fans are used to anagrams - groups of words with the same letters in different ...