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

安装

rush:bash;"> npm install --save redux npm install --save redux-saga

配置action

actionType

创建文件src/actions/types.js，在types.js文件中添加需要的action类型

rush:js;"> 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

// 获取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

// 初始化
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

rush:js;"> import {combineReducers} from 'redux' import test from './test'

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

export default reducers;

配置saga

创建文件src/sagas/test.js

rush: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里面有<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>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

rush:js;"> import {all} from 'redux-saga/effects'; import testSaga from './test'

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

配置store

rush:js;"> 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入口文件路由配置

const MainApp = () =>

;

export default MainApp

Test.js

src/Test/index.js

rush:js;"> 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()}>从网络<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>test3的值</button>
    </div>
  </div>
}

}
}

const mapStatetoProps = ({test}) => {
const {test1,test3} = test;
return {test1,test3}
}

export default connect (mapStatetoProps,{setTest2Action,setTest3Action})(Test)

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

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