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

安装

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