记录一篇关于redux-saga的基本使用过程
安装
npminstall--saveredux npminstall--saveredux-saga
配置action
actionType
创建文件src/actions/types.js，在types.js文件中添加需要的action类型
exportconstTEST1_ACTION='test1'; exportconstSET_TEST2_ACTION='change_test2'; exportconstSET_TEST3_ACTION='change_test3';
createActions
创建文件src/actions/test.js，在test.js文件中编写action
import{TEST1_ACTION,SET_TEST2_ACTION,SET_TEST3_ACTION}from'./types
//获取test1的值
exportconstgetTest1Action=()=>{
return{
type:TEST1_ACTION
}
}
//写入test2的值
exportconstsetTest2Action=(testValue)=>{
return{
type:SET_TEST2_ACTION,
payload:testValue
}
}
//写入test3的值
exportconstsetTest3Action=(payload)=>{
return{
type:SET_TEST3_ACTION,
payload
}
}
配置reducer
因为一个项目中可能会有很多地方需要用到reducer，所以把这些reducer文件分开管理比较好，比如：test.js,settings.js,auth.js等等。
创建文件src/reducers/test.js，编写testreducer
import{TEST1_ACTION,SET_TEST2_ACTION,SET_TEST3_ACTION}from'../actions/types
//初始化
constinitTest={
test1:'这是test1初始化的值',
test2:'这是test2初始化的值',
test3:'这是test3初始化的值'
}
exportdefault(state=initTest,action)=>{
switch(action.type){
caseTEST1_ACTION:{
return{
...state
}
}
caseSET_TEST2_ACTION:{
return{
...state,
test2:action.payload
}
}
caseSET_TEST3_ACTION:{
return{
...state,
test3:action.payload.testValue
}
}
default:
returnstate
}
}
创建文件src/reducers/index.js
import{combineReducers}from'redux'
importtestfrom'./test'
constreducers=combineReducers({
test,
/*
还可以继续加入其它的reducer文件，比如：
settings,
auth,
*/
});
exportdefaultreducers;
配置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"
importaxiosfrom'axios'
function*changeTest2(testValue){
yieldput(setTest2Action(testValue))
}
function*changeTest3(obj){
try{
//这里使用axios从网络获取数据演示，没有安装axios的需要先安装它。
//期间响应状态码判断就省略了，就当它每次请求都成功获得testValue的数据
response=axios.get('http://localhost/api/test')
//假设response.data里面有一个key为testValue的值
yieldput(setTest3Action(response.data))
}catch(error){
console.error('这里也可以yieldput一个createAction，这里不作演示')
}
}
exportfunction*setTest2(){
yieldtakeEvery(SET_TEST2_ACTION,changeTest2)
}
exportfunction*setTest3(){
yieldtakeEvery(SET_TEST3_ACTION,changeTest3)
}
exportdefaultfunction*testSaga(){
yieldall([
fork(setTest2),
fork(setTest3),
])
}
创建文件src/sagas/index.js
import{all}from'redux-saga/effects';
importtestSagafrom'./test'
exportdefaultfunction*rootSaga(){
yieldall([
testSaga()
]);
}
配置store
import{applyMiddleware,compose,createStore}from'redux';
importreducersfrom'../reducers/index';
importcreateSagaMiddlewarefrom'redux-saga';
importrootSagafrom'../sagas/index';
constsagaMiddleware=createSagaMiddleware();
//使用数组是为了方便以后继续添加中间件
constmiddlewares=[sagaMiddleware];
constcomposeEnhancers=window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||compose;
conststore=createStore(
reducers,
composeEnhancers(applyMiddleware(...middlewares))
);
sagaMiddleware.run(rootSaga);
exportdefaultstore;
App入口文件路由配置
importReactfrom'react'
import{Provider}from'react-redux'
importstorefrom'./store'
importTestfrom'./Test/'
import{BrowserRouter,Route,Switch}from"react-router-dom"
constMainApp=()=>
;
exportdefaultMainApp
Test.js
src/Test/index.js
importReactfrom'react'
import{connect}from'react-redux'
import{setTest2Action,setTest3Action}from'../actions/test'
classTestextendsReact.Component{
render(){
const{test1,test2,test3,setTest2Action,setTest3Action}=this.props
return{
test1的值为：{test1}
test2的值为：{test2}
设置test2的值为abc
test3的值为：{test3}
从网络获取test3的值
}
}
}
constmapStateToProps=({test})=>{
const{test1,test2,test3}=test;
return{test1,test2,test3}
}
exportdefaultconnect(mapStateToProps,{setTest2Action,setTest3Action})(Test)
至此，即可运行npmstart进行测试了
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。