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

npm install --save reduxnpm 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)