记录一篇关于redux-saga的基本使用过程
作者:Chiu 发布时间:2023-07-15 16:43:19
标签:redux-saga,使用
安装
npm install --save redux
npm install --save redux-saga
配置action
actionType
创建文件src/actions/types.js,在types.js文件中添加需要的action类型
export const TEST1_ACTION = 'test1';
export const SET_TEST2_ACTION = 'change_test2';
export const SET_TEST3_ACTION = 'change_test3';
createActions
创建文件src/actions/test.js,在test.js文件中编写action
import {TEST1_ACTION, SET_TEST2_ACTION, SET_TEST3_ACTION} from './types
// 获取test1的值
export const getTest1Action = () => {
return {
type:TEST1_ACTION
}
}
// 写入test2的值
export const setTest2Action = (testValue) => {
return {
type:SET_TEST2_ACTION,
payload:testValue
}
}
// 写入test3的值
export const setTest3Action = (payload) => {
return {
type:SET_TEST3_ACTION,
payload
}
}
配置reducer
因为一个项目中可能会有很多地方需要用到reducer,所以把这些reducer文件分开管理比较好,比如:test.js,settings.js,auth.js等等。
创建文件src/reducers/test.js,编写test reducer
import {TEST1_ACTION, SET_TEST2_ACTION, SET_TEST3_ACTION} from '../actions/types
// 初始化
const initTest = {
test1:'这是test1初始化的值',
test2:'这是test2初始化的值',
test3:'这是test3初始化的值'
}
export default (state = initTest, action) =>{
switch (action.type) {
case TEST1_ACTION:{
return {
...state
}
}
case SET_TEST2_ACTION:{
return {
...state,
test2:action.payload
}
}
case SET_TEST3_ACTION:{
return {
...state,
test3:action.payload.testValue
}
}
default:
return state
}
}
创建文件src/reducers/index.js
import {combineReducers} from 'redux'
import test from './test'
const reducers = combineReducers({
test,
/*
还可以继续加入其它的reducer文件,比如:
settings,
auth,
*/
});
export default reducers;
配置saga
创建文件src/sagas/test.js
import {all,fork,put,takeEvery} from 'redux-saga/effects'
import {setTest2Action, setTest3Action} from "../actions/test"
import {SET_TEST2_ACTION, SET_TEST3_ACTION} from "../actions/actionTypes"
import axios from 'axios'
function* changeTest2 (testValue) {
yield put(setTest2Action(testValue))
}
function* changeTest3 (obj) {
try{
// 这里使用axios从网络获取数据演示,没有安装axios的需要先安装它。
// 期间响应状态码判断就省略了,就当它每次请求都成功获得testValue的数据
response = axios.get('http://localhost/api/test')
// 假设response.data里面有一个key为testValue的值
yield put(setTest3Action(response.data))
} catch (error) {
console.error('这里也可以yield put一个createAction,这里不作演示')
}
}
export function* setTest2 () {
yield takeEvery(SET_TEST2_ACTION, changeTest2)
}
export function* setTest3 () {
yield takeEvery(SET_TEST3_ACTION, changeTest3)
}
export default function* testSaga(){
yield all([
fork(setTest2),
fork(setTest3),
])
}
创建文件src/sagas/index.js
import {all} from 'redux-saga/effects';
import testSaga from './test'
export default function* rootSaga() {
yield all([
testSaga()
]);
}
配置store
import {applyMiddleware, compose, createStore} from 'redux';
import reducers from '../reducers/index';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas/index';
const sagaMiddleware = createSagaMiddleware();
// 使用数组是为了方便以后继续添加中间件
const middlewares = [sagaMiddleware];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducers,
composeEnhancers(applyMiddleware(...middlewares))
);
sagaMiddleware.run(rootSaga);
export default store;
App入口文件路由配置
import React from 'react'
import {Provider} from 'react-redux'
import store from './store'
import Test from './Test/'
import {BrowserRouter, Route, Switch} from "react-router-dom"
const MainApp = () =>
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route path="/" component={Test}/>
</Switch>
</BrowserRouter>
</Provider>;
export default MainApp
Test.js
src/Test/index.js
import React from 'react'
import {connect} from 'react-redux'
import {setTest2Action, setTest3Action} from '../actions/test'
class Test extends React.Component {
render() {
const {test1, test2, test3, setTest2Action, setTest3Action} = this.props
return {
<div>
<div>
test1的值为:{test1}
</div>
<div>
test2的值为:{test2}
<button onClick={setTest2Action('abc')}>设置test2的值为 abc</button>
</div>
<div>
test3的值为:{test3}
<button onClick={setTest3Action()}>从网络获取test3的值</button>
</div>
</div>
}
}
}
const mapStateToProps = ({test}) => {
const {test1,test2,test3} = test;
return {test1,test2,test3}
}
export default connect (mapStateToProps,{setTest2Action, setTest3Action})(Test)
至此,即可运行 npm start
进行测试了
来源:https://segmentfault.com/a/1190000016048599
0
投稿
猜你喜欢
- 如何制作一个从Access数据库中读取记录的下拉菜单?看看这个例子:<% SQL = "SEL
- 1.首先主题选择不要落俗!现在许多的个人主页就象“大锅饭”。题材包罗万象,内容雷同无味。人人都是“软件速递”“音乐宝库”“主页教程”等等。让
- 本文实例为大家分享了Go实现文件上传和下载的具体代码,供大家参考,具体内容如下一.文件上传文件上传:客户端把上传文件转换为二进制流后发送给服
- 在安装依然主机管理系统时,因为当时导入MSSQL时有点问题,所以,为了赶快能用上管理功能,所以就暂时先用了Access数据库。不过一直以来都
- SQL查询输出,根据表内某字段为准,输出不重复记录,或删除掉重复的记录,保留所需要的记录。今儿见一朋友在蓝色里问起(查询不重复记录~),想想
- 1、授权机制的主要作用是什么?授权机制的基本作用是给某个主机上的用户对某个数据库以select,insert,update和detete的权
- 在登陆界面中,通常,最重要的部分为登陆的Form表。一个非常棒的提升体验的做法是,在载入页面时自动聚焦到第一个提供用户输入的表单框,让用户不
- 从我们论坛中收集了这段HTML制作页面需要最大化、最小化时可以借鉴参考。最大化效果:<OBJECT id="max
- 在曾经的 淘宝UED 招聘 中有这样一道题目:“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直
- 如下所示:result = result.T.sort(['confidence','support'],
- 重要提示:本文并非一篇简单地介绍内联格式模型(inline formatting model)的文章。相反,它是对内联格式(inline f
- 在本人看来,HTML 5是一个妥协方案,虽不激进,但更能推动技术的继续进步。没有命名空间,元素也不要求闭合(当然这并不是优点),浏览器也可以
- 本文中我们将通过一个例子来介绍SQL Server 2005的一个Bug,首先,在建立同义词链接Oracle的时候,我们会使用下面的语句:C
- 1.INPUT和图片按钮对齐:<form method="post" action="
- FrontPage服务器扩展可以做以下工作:(1),保存和检索Web服务器的文件;(2),远程执行所有文件管理操作;(3),改名或移动文件时
- 以一种有意义的方式组织数据可能是一项挑战。有时你需要的可能是一个简单的排序,但是通常你需要做更多,你需要分组来进行分析和统计。幸运的是,SQ
- 已知有一个XML文件(bookstore.xml)如下:<?xml version="1.0" encoding=
- 在现在的项目里,不管是电商项目还是别的项目,在管理端都会有导出的功能,比方说订单表导出,用户表导出,业绩表导出。这些都需要提前生成excel
- 假如您在安装SQL Server 2005时出现计数器错误,在搜索过所有的方法都不适用的情况下可以采用以下方法:将4个计数器删除:(如果没有
- 图片的宽度和高度是未知的,没有一个固定的尺寸,在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中,想想感觉还是挺麻烦的,由于最近的项