记录一篇关于redux-saga的基本使用过程
2018-08-18 16:21
691 查看
安装
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进行测试了
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- 关于xstream使用过程中遇到的一些问题,记录一下
- 网上一篇关于JavaScript基本概念初级讲解论坛贴的学习记录
- 关于使用ant-design设计可动态添加FormItem的过程中遇到的问题记录。
- 关于 redux-saga 中 take 使用方法详解
- Android关于开发过程中使用Webview时的基本设置。
- 玩转ESP8266测试板(一):基本操作 2015年1月20日玩转ESP8266测试板(一):基本操作有1条评论阅读: 1,490 次 ESP8266测试板到了,在此记录一下使用过程。 先上图:
- 关于aircrack使用过程中的一些记录
- Android关于开发过程中使用Webview时的基本设置。
- 关于redux-saga中take使用方法详解
- 关于redux-saga中take使用方法
- 一篇关于在COMBOBOX中使用SENDMESSAGE的实例
- 调用存储过程并且使用返回值的基本方法
- oracle 存储过程的基本使用
- 关于java 的基本开发工具:命令控制台的使用
- 关于AcGe库的基本使用方法
- [错误记录]关于指针传递获得数据使用错误问题....
- 数据库操作_连接SQL Server数据库示例;连接ACCESS数据库;连接到 Oracle 数据库示例;SqlCommand 执行SQL命令示例;SqlDataReader 读取数据示例;使用DataAdapter填充数据到DataSet;使用DataTable存储数据库表;将数据库数据填充到 XML 文件;10 使用带输入参数的存储过程;11 使用带输入、输出参数的存储过程示;12 获得数据库中表的数目和名称;13 保存图片到SQL Server数据库示例;14 获得插入记录标识号;Exce
- 两个存储过程:一、使用存储过程动态创建数据表。二、插入新记录。
- 最好的一篇关于Log4j的使用的文章