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

安装

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(假设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

至此，即可运行 npm start进行测试了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。