在react中使用redux项目架构及编码风格推荐

在react中使用redux推荐的部分项目架构组织

|-- src
    |-- action
    |   |-- index.js
    |   |-- types.js
    |   |-- theme
    |       |-- index.js
    |-- reducer
    |   |-- index.js
    |   |-- theme
    |       |-- index.js
    |-- store
        |-- index.js

action 文件夹下放action相关文件，其中types.js 定义了action 的type 常量。

types.js

export default {
    THEME_CHANGE: 'THEME_CHANGE',
    THEME_INIT: 'THEME_INIT',
};

theme 文件夹下定义了index.js 与theme 相关的action创建函数
其中 函数名推荐使用on + 对象 + 动作类型 来命名。

index.js

import Types from '../types';

export function onThemeChange(theme) {
    return {type: Types.THEME_CHANGE, theme: theme};

}

在action目录下的index.js中导出不同的action创建函数。

action/index.js

import {onThemeChange} from './theme';

export default {
    onThemeChange,
};

reducer 的目录构建参考action.

值得注意的是我们在引入index.js文件时直接import 到index.js所在的文件夹，根据nodejs文件查找策略如果导入的是一个文件夹，会寻找该文件夹下的index.js文件。

总结来说，在实际的项目中，我们需要做到以下

• action的type定义常量
• action通过action创建函数来生成（自定义或者借助第三方库）
• reducer根据功能或者类别进行拆分，最终使用combineReducer 组成根reducer.