一次React+Redux实践及思考-JavaScript-火龙果软件工程

一次React+Redux实践及思考

来源：segmentfault 发布于 2017-4-7

次浏览

这是笔者第一次将React+Redux应用到一个较为复杂的项目中，这个项目初期遇到最大的问题是以何种粒度进行组件拆分，因为该项目没有专配的UI，所以是程序猿直接按照自己的理解进行开发，在这种情况下，笔者习惯性的先写了一个包含菜单以及常见控制项的整体项目，然后再进行拆分。笔者在本文中就是把一些迭代和自己感受到的点扯扯。水文一篇，一笑而过。

首先来看下整个项目的大概功能与用户逻辑：

可以看出整个项目的分布上，分为五个角色，然后每个角色有一个单独的入口。为了保证一定的隔离性与代码的清晰性，笔者是分为了五个模块，然后在这五个模块里面对公共组件进行封装。总体而言，不同组件中表示同一功能的代码块都应该被抽出来形成独立的组件。组件之间的通信应该从Redux的Store进行。

另外，这边还有一个考虑，就是是否需要将所有的状态都放到Redux中进行统一管理。譬如在我们有一个创建接口的弹窗，大概就是下图这个样子：

这个组件相对而言还是独立的，其中的接口状态等暂时可以认为是不需要与其他组件交互的。那么到底要不要将它的状态，或者说要不要将创建API等等逻辑函数也提出来放到ActionCreator与Reducer中，感觉有点多此一举啊，毕竟对于一个Demo而言UnitTest与Time Travel好像都不是那么必须。不过，千里之堤毁于蚁穴，为了避免未来坑多，还是从零开始都规范一点吧。具体会在下文中的表单部分进行讨论

Project Structure

项目的总体目录情况如下：

Webpack Config

对于Webpack部分的详细配置与讲解可以参考Webpack-React-Redux-Boilerplate这个。

Reducer

Redux本身的特点就是将原来的逻辑处理部分拆分到ActionCreator与Reducer中，而Reducer本身的层次关系又决定了State的结构。为了划分State中的层叠结构，笔者一开始是打算利用如下的方式：

import apiDataGridReducer from "../../../../app/components
/api/api_datagrid/api_datagrid.reducer";
import apiContentReducer from "../../../../app/components
/api/api_content/api_content.reducer";
import apiGroupReducer from "../../../../app/components
/api/api_group/api_group.reducer";
const defaultState = {

api_datagrid: {},

api_content: {},

api_group: {}

};

export default function reducer(state = defaultState, action) {

state = Object.assign({}, state, {
api_datagrid: apiDataGridReducer(state.api_datagrid, action)
});

state = Object.assign({}, state, {
api_content: apiContentReducer(state.api_content, action)
});

state = Object.assign({}, state, {
api_group: apiGroupReducer(state.api_group, action)
});

return state;

}

就是不停地将子部分的Reducer在父Reducer中进行合成，然后在模块的根reducer.js中引入父Reducer，不过这样后来感觉不太合适，譬如在内容管理员的部分，我只需要用到apiDataGridReducer，但是还不得不把其他的Reducer也引入。后来笔者改成了直接在根reducer.js中引入单个的Reducer，然后利用层叠调combineReducers方法：

rootReducer = combineReducers({
router, // redux-react-router reducer
account: combineReducers({
profile: combineReducers({
info, // reducer function
credentials // reducer function
}),
billing // reducer function
}),
// ... other combineReducers
})
});

表单

笔者一开始没有注意到表单这一点，后来做着做着发现整个项目的一个很大的组成部分就是各式各样的重复的表单

笔者建议使用redux-form，它比较好地将常见的表单操作结合到了一起，另一方面，它还能解决上文提到的一个Reducer问题，即是State的命名空间的嵌套问题。这部分的示例代码可以参考form

（1）使用npm安装redux-form

npm install --save redux-form

（2）将redux-form提供的formReducer挂载到rootReducer中

import {createStore, combineReducers} from 'redux';
import {reducer as formReducer} from 'redux-form';
const reducers = {
// ... your other reducers here ...
form: formReducer // <---- Mounted at 'form'. See note below.
}
const reducer = combineReducers(reducers);
const store = createStore(reducer);

（3）编写自定义form组件

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';

class ContactForm extends Component {
render() {
const {fields: {firstName, lastName, email}, handleSubmit} = this.props;
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<input type="text" placeholder="First Name" {...firstName}/>
</div>
<div>
<label>Last Name</label>
<input type="text" placeholder="Last Name" {...lastName}/>
</div>
<div>
<label>Email</label>
<input type="email" placeholder="Email" {...email}/>
</div>
<button type="submit">Submit</button>
</form>
);
}
}

ContactForm = reduxForm({ // <----- THIS IS THE IMPORTANT PART!
form: 'contact', // a unique name for this form
fields: ['firstName', 'lastName', 'email'] // all the fields in your form
})(ContactForm);

export default ContactForm;

次浏览