记录一篇关于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 相关文章推荐
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
JS通过相同的name进行表格求和代码
Aug 18 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
node.js实现快速截图
Aug 27 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
Feb 18 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
原生JS实现烟花效果
Mar 10 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
php单件模式结合命令链模式使用说明
2008/09/07 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
js 动态选中下拉框
2009/11/26 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
2012/11/11 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
vue2.0 elementUI制作面包屑导航栏
2018/02/22 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
python使用xauth方式登录饭否网然后发消息
2014/04/11 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
Europcar比利时:租车
2019/08/26 全球购物
店长岗位的工作内容
2013/11/12 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
合作与交流自我评价
2015/03/09 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js
openstack云计算keystone组件工作介绍
2022/04/20 Servers