redux异步action_简化 Redux 开发的实践和思考

团队里一直都在用 Redux 做状态管理，Redux 本身非常轻量，区区上百行代码就实现了一个清晰的状态管理框架，但是围绕 Redux 本身却出现了很多争议，比如需要写大量的 Action 模板代码，需要写很多 switch case 分支判断，Action 和 Reducer 分开写难以维护等等，本文主要是总结项目中如何简化 Redux 开发，提供相关参考思路。

问题

典型的 Redux 代码如下：

Action Creator:

export const SET_TODOS = 'SET_TODOS';
export const setTodos = (list = []) => {
    
    return {
    
        type: SET_TODOS,
        list,
    }
}

export const loadTodos = (params) => {
    
    return async (dispatch, getState) => {
    
        const todos = await http.get('save/todo');
        dispatch(setTodos(setTodos));
    }
}

Reducers:

import {
    
    SET_TODOS,
} from './actions'

export const setTodos = (state, list) => {
    
    return state.set('list', list);
}

export const reduder = (state, action) => {
    
    switch (action.type) {
    
        case SET_TODOS:
            return setTodos(state, action.list);
        default:
            break;
    }
}

Component:

import React, { Component } from 'react'
import { bindActionCreators } from 'redux';
import {
    loadTodos,
} from './actions'
import { connect } from 'react-redux'

export class TodoList extends Component {
    render() {
        const me = this;
        const {
            list = [],
        } = me.props;
        return (