React+Redux项目结构最佳实践

前端之家收集整理的这篇文章主要介绍了React+Redux项目结构最佳实践前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React + Redux 是React生态中使用最频繁的技术栈,但关于如何组织React+Redux的项目结构,一直都有多种声音。本文将讨论其中最常用的3种项目结构,并给出个人的最佳实践。

1.按照类型

这里的类型指的是一个文件在项目中充当的角色类型,即这个文件是一个component,还是一个container,或者是一个reducer等,充当component、container、action、reducer等不同角色的文件,分别放在不同的文件夹下,这也是Redux官网示例所采用的项目结构。这种结构如下所示:

actions/
  a.js
  b.js
components/
  a1.js
  a2.js
  b1.js
constainers/
  a.js
  b.js
reducers/
  a.js
  b.js
index.js

使用这种结构组织项目,每当增加一个新功能时,需要在containers和components文件夹下增加这个功能需要的组件,还需要在actions和reducers文件夹下,分别添加Redux管理这个功能使用到的action和reducer,如果action type是放在另外一个文件夹的话,还需要在这个文件夹下增加新的action type文件。所以,开发一个功能时,你需要频繁的切换路径,修改不同的文件。当项目逐渐变大时,这种项目结构是非常不方便的。

2.按照功能

一个功能模块对应一个文件夹,这个功能所用到的container、component、action、reducer等文件,都存放在这个文件夹下。如下所示:

feature1/
  components/
  actions.js
  container.js
  index.js
  reducer.js
feature2/
  components/
  actions.js
  container.js
  index.js
  reducer.js
index.js
rootReducer.js

这种项目结构的好处显而易见,一个功能中使用到的组件、状态和行为都在同一个文件夹下,方便开发,易于功能的扩展,Github上很多脚手架也选择了这种目录结构,如https://github.com/react-boil...。但这种结构也有一个问题,Redux会将整个应用的状态作为一个store来管理,不同的功能模块之间可以共享store中的部分状态(项目越复杂,这种场景就会越多),于是当你在feature1的container中dispatch一个action,很可能会影响feature2的状态,因为feature1和feature2共享了部分状态,会响应相同的action。这种情况下,不同模块间的功能被耦合到了一起。

3.Ducks

Ducks其实是对一种新的Redux项目结构的提议。它提倡将相关联的reducer、action types和action写到一个文件里。本质上是以应用的状态作为模块的划分依据,而不是以界面功能作为划分模块的依据。这样,管理相同状态的依赖都在同一个文件中,不管哪个容器组件需要使用这部分状态,只需要在这个组件中引入这个状态对应的文件即可。这样的一个文件(模块)如下:

// widget.js

// Actions
const LOAD   = 'widget/LOAD';
const CREATE = 'widget/CREATE';
const UPDATE = 'widget/UPDATE';
const REMOVE = 'widget/REMOVE';

const initialState = {
  widget: null,isLoading: false,}

// Reducer
export default function reducer(state = initialState,action = {}) {
  switch (action.type) {
    LOAD: 
      //...
    CREATE:
      //...
    UPDATE:
      //...
    REMOVE:
      //...
    default: return state;
  }
}

// Action Creators
export function loadWidget() {
  return { type: LOAD };
}

export function createWidget(widget) {
  return { type: CREATE,widget };
}

export function updateWidget(widget) {
  return { type: UPDATE,widget };
}

export function removeWidget(widget) {
  return { type: REMOVE,widget };
}

整体的目录结构如下:

components/  (应用级别的通用组件)
containers/  
  feature1/
    components/  (功能拆分出的专用组件)
    feature1.js  (容器组件)
    index.js     (feature1对外暴露的接口)
redux/
  index.js (combineReducers)
  module1.js (reducer,action types,actions creators)
  module2.js (reducer,actions creators)
index.js

在前两种项目结构中,当container需要使用actions时,可以通过import * as actions from 'path/to/actions.js'方式,一次性把一个action文件中的所有action creators都引入进来。但在使用Ducks结构时,action creators和reducer定义在同一个文件中,import *的导入方式会把reducer也导入进来(如果action types也被export,那么还会导入action types)。我们可以把action creators和action types定义到一个命名空间中,解决这个问题。修改如下:

// widget.js

// Actions
export const types = {
  const LOAD   : 'widget/LOAD',const CREATE : 'widget/CREATE',const UPDATE : 'widget/UPDATE',const REMOVE : 'widget/REMOVE'
}

const initialState = {
  widget: null,action = {}) {
  switch (action.type) {
    types.LOAD: 
      //...
    types.CREATE:
      //...
    types.UPDATE:
      //...
    types.REMOVE:
      //...
    default: return state;
  }
}

// Action Creators
export actions = {
  loadWidget: function() {
    return { type: types.LOAD };
  },createWidget: createWidget(widget) {
    return { type: types.CREATE,widget };
  },updateWidget: function(widget) {
    return { type: types.UPDATE,removeWidget: function(widget) {
    return { type: types.REMOVE,widget };
  }
}

这样,我们在container中使用actions时,可以通过import { actions } from 'path/to/module.js' 引入,避免了引入额外的对象,也避免了import时把所有action都列出来的繁琐。

现在的Ducks结构就是我项目中正在使用的项目结构,用起来还是很顺畅的,欢迎大家提出改进建议!

猜你在找的React相关文章