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

npm install --save redux
npm install --save redux-saga

export const TEST1_ACTION = 'test1';
export const SET_TEST2_ACTION = 'change_test2';
export const SET_TEST3_ACTION = 'change_test3';

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
 }
}

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
 }
}

import {combineReducers} from 'redux'
import test from './test'


const reducers = combineReducers({
 test,
 /*
 还可以继续加入其它的reducer文件，比如：
 settings,
 auth,
 */
});

export default reducers;

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),
 ])
}

import {all} from 'redux-saga/effects';
import testSaga from './test'

export default function* rootSaga() {
 yield all([
 testSaga()
 ]);
}

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;

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

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)