lesson-3 构建 React 项目开发模板

lesson-3 构建 React 项目开发模板

项目地址：https://github.com/ZengTianSh...

前言：

在 lesson-1 :构建一套适合 React、ES6 开发的脚手架,lesson-2 : Redux 的设计思想,
我们已经对利用 React 构建项目有了一些基础知识，那推出 构建 React 项目开发模板 是为了在
实际的项目中有一套完善的体系或机制来迎合我们实际的开发需求，比如在 lesson-2 中，虽然我们已经
能让项目带着 Redux 这么一个数据状态管理机器给运转起来了，那 lesson-3 就是对 React 结合
react-redux 进一步封装，使开发更加清爽，项目也更加容易迭代和维护。

先看一下本项目封装完的一个案例：

前言2：

如果对下面知识点的补充不是很熟悉，可以先看前篇我写的内容 lesson-2 : Redux 的设计思想

我们还需要一些中间件

在封装项目的过程中，我们还需要一些好用的中间件来支持我们的封装。

1、combineReducers

combineReducers 函数是用来对 reducer 函数进行拆分的。我们在 reducer 函数里进行case 多条来着
Action 派发过来的数据，并返回 State ，但在项目复杂，数据一多的情况下，在一个reducer 函数里面处理
多条不同的数据就显得比较乱：

const chatReducer = (state = defaultState,action = {}) => {
  switch (action.type) {
    case TYPE1:
      // ...
       return state;
    case TYPE2:
       // ...
     return state;
    case TYPE3:
       // ...
    return state;
       //...
    default: return state;
  }
};

有了 combineReducers 我们可以这么写 reducer：

//  reducer.jsx
export const reducerData1 =  (state ={},action={}) => {
    switch (action.type){
              case 'TYPE1':
              return {count:233};
        default: return state;
    }
};
export const reducerData2 =  (state ={name:'曾田生'},action={}) => {
    switch (action.type){
              case 'TYPE2':
              return {
                name:state.name,age:'233'
              };
        default: return state;
    }
};
// ...

最后绑定到 store上：

// store.jsx
import * as reducer from './reducer'
var store = createStore(
    combineReducers(reducer),applyMiddleware(thunk)
);
export default store;

合并后的 reducer 保存的是各个子reducer的state数据，合并成一个state对象。比如上面 reducer.jsx 得到的数据是：

state:{
  reducerData1:{
    count:233
  },reducerData2:{
    name:'曾田生',age:'233'
  }
}

2、applyMiddleware

简单解释是可以包装 store 的 dispatch（） 方法，比如对 store.dispatch（）的时候包装一个异步请求的网络处理机制啊。

3、redux-thunk

虽然 applyMiddleware 允许 store.dispatch（action）多做一些事，但 dispatch 只能接收的参数是一个对象（action），
那怎么多做事呢，redux-thunk 改造了 store.dispatch（），使 dispatch 能接收一个函数做参数，有了函数做参数那么能做
的功能就多了。

// action.jsx
export const increase = () => {
  return {type: 'INCREASE'}
}

将action绑定到组件上：

import  * as action from '../../Redux/action.jsx'

connect(mapStateToProps,action)(Index);

注意 action.jsx export 的是函数，而且不用 dispatch（），直接 return action 就可以了，这得力于有了 redux-thunk
帮我们做的事。

我们需要更好的工具

1、Fetch 网络请求插件

Fetch标准定义了请求，响应和绑定它们的进程 。也许你会想，网络请求不是有 Ajax，自己封装一个不就好了，或者jQuery的
$.ajax不是很流行很好用了吗。但基于事件的异步请求在多任务的处理中还是很不方便的。Fetch API 是基于 Promise设计的，
这样极大的好处是，请求到数据不用使用层层回调，可以用链式操作的方式处理我们的数据。
还不是很清晰的话可以点开这个链接看看
结合 React 的使用：

// action.jax
import fetch from 'isomorphic-fetch'  
export const fetchData = (url,data) => {
  // 派发给 reducer 说明现在正在网络请求
   dispatch（{type:'GETDATA_STAR'}）
   return dispatch =>{
     fetch(url,{
        mode: 'cors',"Content-Type": "application/json"
     })
      .then(function(response) {
          if (response.status >= 400) {
              throw new Error("Bad response from server");
          }
          return response.json();
      })
      .then(function(data){
          // 最后得到数据派发给 reducer ，表示数据请求成功并返回数据
           return dispatch({type:"GETDATA_END",data:data}});
      })
      .catch(function(error) {
          console.log('Request failed',error)
      });
   }
}

2、immutable.js 优化React性能

immutable 不可变的意思。都知道 React 的state或子组件的props数据一变化，那就会触发组件重新 render ，
那变化的 props 假如跟其他组件没关系，但其他组件也会受到影响逼自己重新render，那岂不就耗性能了。
immutable.js 就是将普通JS对象和数组转换为不可变的Map和List集合。对 js 数据做深层比较，如果没变化就
不对组件进行 render 。这里只是给大家提有这么一个概念，可以在大型的React项目中使用，具体内容请Google

怎么封装我们的 React 项目

前面吧啦吧啦一大堆，具体还是得看在项目中是怎么封装和应用的，不然就太抽象了。
先看项目的结构图：

相对于 lesson-2 我们单独抽出了 action reducer 和 store ，外加了一个 router组件
还有一个 template.jax ，这个是来作为所有组件的模板的。可以看下面的草图了解各个文件在
项目中扮演的角色：

在项目中也有很好的注解，可以 clone 本项目进行运行分析

clone git@github.com:ZengTianShengZ/react-lesson.git
cd lesson-3
npm install
npm run hot
浏览器打开： http://127.0.0.1:8088/

总结：

lesson-3 主要是延续了 lesson-2 的内容，对结合 react-redux 的React项目做了封装，让React在
实际项目开发中更加清爽，项目也更加容易维护。为此也介绍了一些新的知识点 combineReducers 和 redux-thunk
中间件，以及好用的网络请求 Fetch 工具等。

至此，react项目构建三部曲 告一段落 ，有不足的地方还请大家 issue ，欢迎 star
本人也在继续努力的学习中，会让这个项目更加完善，谢谢！

项目地址：https://github.com/ZengTianSh...

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!