安裝

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