Redux源码解读

Oct 25, 2015

821

最近在弄公司管理后台,考虑到只是在团队里面用,尝试采用React来写,状态采用Redux来管理,结合webpack开发。

在React中,所谓的组件就是一个个状态机器,当应用变得复杂时,状态如果管理不当,会使代码变得难以调试。Redux通过限制更新发生的时间和方式,尝试使state的变化变得可预测。Redux是一个很小的库,除了能与React一起使用,还支持其它库,如angular。

Redux可描述为如下三大原则:

  1. 单一数据源,整个应用只有一个store;
  2. state是只读的,只能通过触发action来修改;
  3. 通过编写reducers来描述action如何修改state。

接下来,通过Redux源码来了解Redux如何工作。

Redux仅有以下几个API,以Redux3.0.0为例

export {
  createStore,
  combineReducers,
  bindActionCreators,
  applyMiddleware,
  compose
};

React结合Webpack使用

June 30, 2015

3824

Todo的代码已经更新到了React0.14,React0.14分为react和react-dom两部分。如果想查看之前的代码,可以在github上切换到分支react0.13。

最近在学习React,配合Webpack使用使得开发和调试变得方便多了。这几天抽空采用React和Webpack写了一个手机单页面应用,演示地址:http://lab.crazycoder.cc/todo。本文主要记录Webpack与React配合使用的过程(采用node.js来处理)。

1、React

React组件拥有比较灵活的结构,可采用JSX来编写,代码比较简洁。同时React实现一个虚拟DOM树,用于浏览器减少重绘和重排等等。

npm install react --save

2、Webpack

webpack是一个模块加载器,特别灵活,能够像node.js解析代码中的依赖,将代码进行打包等等。

npm install -g webpack

webpack安装完后,需要配置,默认配置文件为webpack.config.js,大概配置如下

var path = require('path');

module.exports = {
  entry: [path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js', 
  },
  module: { //loaders
  }
};

module中主要是配置一些加载器如css、babel等,后面会给出详细的配置。

Wen's Blog

文章归档 » 文章标签 » 博主:吴文伟,Web开发爱好者,专注于前端开发,该博客用于记录和分享平时遇到的一些问题以及知识。

订阅

联系方式

链接