记录一篇关于redux-saga的基本使用过程


Posted in Javascript onAugust 18, 2018

安装

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进行测试了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
Javascript的表单验证长度
Mar 16 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 Javascript
Vue实现6位数密码效果
Aug 18 #Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 #Javascript
详解Angular6 热加载配置方案
Aug 18 #Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 #Javascript
vue下history模式刷新后404错误解决方法
Aug 18 #Javascript
详解javascript appendChild()的完整功能
Aug 18 #Javascript
vue中的自定义分页插件组件的示例
Aug 18 #Javascript
You might like
Smarty模板快速入门
2007/01/04 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
浅谈window对象的scrollBy()方法
2015/07/15 Javascript
jQuery插件简单实现方法
2015/07/18 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
简单好用的nodejs 爬虫框架分享
2017/03/26 NodeJs
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
Python采集腾讯新闻实例
2014/07/10 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
python3使用smtplib实现发送邮件功能
2018/05/22 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
Django后台admin的使用详解
2019/07/08 Python
Django中如何使用sass的方法步骤
2019/07/09 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
伦敦剧院及景点门票:Encore Tickets
2018/07/01 全球购物
教师敬业奉献模范事迹材料
2014/05/18 职场文书
国际贸易毕业生自荐书
2014/06/22 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
党员自我评价2015
2015/03/03 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
《莫泊桑拜师》教学反思
2016/02/22 职场文书