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

594

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

项目地址: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
本人也在继续努力的学习中,会让这个项目更加完善,谢谢!

项目地址:github.com/ZengTianSh.…