redux-saga案例使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/pansuyong/article/details/82918265

redux-saga的配置

store/index.js
import { createStore,applyMiddleware,compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducer from './reducer'
import todoSagas from './sagas'
const sagaMiddleware = createSagaMiddleware();

const composeEnhancers =
    typeof window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(
    applyMiddleware(sagaMiddleware),
    // applyMiddleware(thunk),
);
const store = createStore(reducer,enhancer);
sagaMiddleware.run(todoSagas);
export default store;

store/sagas.js

import { takeEvery,put} from 'redux-saga/effects'
import axios from'axios'
import { GET_INIT_LIST } from './actionTypes'
import { initListAction } from './actionCreators'
必须是genenrator函数
function* getInitList(){
    // 利用try...catch...语句来捕获ajax异常
    try{
        //吧异步的代码写在try里面，如果ajax的接口都能
        // 正确的执行并且获取到数据了，就只走try里面的代码，
        //一旦获取接口有错的话就会走到catch里面
        const res=yield axios.get('/list.json');
        const data = res.data;
        const action=initListAction(data);
        yield put(action);
    }catch(e){
      console.log("网络请求失败");
    }


}
function* mySaga() {
    yield takeEvery(GET_INIT_LIST, getInitList);
}

export default mySaga;

src/TodoList2.js

componentDidMount(){
    const action=getInitList();
    store.dispatch(action);
}

store/reducer.js

// 笔记本
/*
state[整个图书馆里所有书籍的信息]/store之前的所有数据
 */
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_ITEMD,INIT_LIST_ACTION} from './actionTypes'
const defaultState = {
    inputValue:'123',
    list:[1,2]
};
//reducer可以接受state，但是绝不能修改state
//reducer必须是纯函数-纯函数指的是，给定固定的输入，
// 就一定会有固定的输出，而且不会有任何的副作用
//一旦函数里面有setTimeout
// 或者是ajax请求
// 或者是和日期相关的 new Date()
//就不再是纯函数了，reducer里面不能有异步和对时间的操作
export default (state=defaultState,action)=>{
    if(action.type===CHANGE_INPUT_VALUE){
        const newState = JSON.parse(JSON.stringify(state));
修改inputValue值
        newState.inputValue=action.value;
        // state.inputValue=action.value 不能对state修改，这样就会产生副作用
        return newState;
    }
    if(action.type===ADD_TODO_ITEM){
        const newState=JSON.parse(JSON.stringify(state));
向list添加值
        newState.list.push(newState.inputValue);
        newState.inputValue='';
        console.log("newState:",newState);
        return newState;
    }
    if(action.type===DELETE_ITEMD){
        const newState=JSON.parse(JSON.stringify(state));
        let index=action.value;
删除list中的值
        newState.list.splice(index,1);
        return newState;
    }
    if(action.type===INIT_LIST_ACTION){
        const newState=JSON.parse(JSON.stringify(state));
初始化list中的数据
        newState.list=action.data;
        return newState;
    }
    // console.log(state,action);
    return state;
}