团队里一直都在用 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 (