Redux-saga中间件的使用

安装

• npm install redux-saga
• redux-saga github地址

使用

todoList.jsstore/index.jsstore/saga.jsstore/actionCreators.jsstore/actionTypes.js

import axios from "axios";
import React, { Component } from "react";
import store from "./store";
import { getInitList } from "./store/actionCreators";
import TodoListUI from './TodoListUI';

class TodoList extends Component {

    constructor(props) {
        super(props);
        this.state = store.getState()
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleStoreChange = this.handleStoreChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleItemDelete = this.handleItemDelete.bind(this)
        // 自动订阅store，监听store的内容
        store.subscribe(this.handleStoreChange);
    }

    render() {
        return <TodoListUI
            inputValue={this.state.inputValue}
            handleInputChange={this.handleInputChange}
            handleBtnClick={this.handleBtnClick}
            list={this.state.list}
            handleItemDelete={this.handleItemDelete}
        />
    }

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

    handleInputChange(e) {
        const value = e.target.value;
        const action = {
            type: 'change_input_value',
            value: value
        }
        store.dispatch(action);
    }

    handleStoreChange () {
        this.setState(store.getState())
    }

    handleBtnClick() {
        const value = this.state.inputValue
        const action = {
            type: 'change_child_value',
            value: value
        }
        store.dispatch(action);
    }

    handleItemDelete(index) {
        const action = {
            type: 'del_child_value',
            index: index
        }
        console.log(action)
        store.dispatch(action)
    }
}

export default TodoList

import createSagaMiddleware from 'redux-saga'
import {applyMiddleware, createStore} from 'redux';
import reducer from './reducer';
import todoSagas from './saga';

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()

// 成功创建store，把reducer传给store，这样store就知道目前有多少内容可以在reduce去查看了
const store = createStore(reducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(todoSagas)

export default store;

import axios from 'axios';
import {takeEvery, put} from 'redux-saga/effects'
import { initListAction } from './actionCreators';
import { GET_INIT_LIST } from './actionTypes'

function* getInitList() {
    const res = yield axios.get('http://e.com/api/index/index');
    const action = initListAction(res.data);
    yield put(action);
}
// generator 函数
function* mySaga() {
    // 捕捉每一个类型 takeEvery(type, )
    yield takeEvery(GET_INIT_LIST, getInitList)
}

export default mySaga

// import axios from 'axios';
import { GET_INIT_LIST, INIT_LIST_ACTION } from './actionTypes';

// redux-thunk
export const initListAction = (data) => ({
    type: INIT_LIST_ACTION,
    data
})

export const getInitList = () => ({
    type: GET_INIT_LIST,
}) 

export const INIT_LIST_ACTION = 'init_list_action';
export const GET_INIT_LIST = 'get_init_list';