V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
darluc
V2EX  ›  Node.js

使用 Redux 秒做 todo-list 应用

  •  1
     
  •   darluc · 2016-10-13 01:48:52 +08:00 · 3134 次点击
    这是一个创建于 2724 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原文: https://log.zvz.im/2016/10/13/build-todo-app/

    React 采用组件和单向数据流的方式完美地解决了用户界面的构建问题,不过它所用于处理状态的工具设计得太简单了,感觉就是故意的;也可能是为了强调 React 只是对应传统的 MVC 架构中 View 的部分。

    作者认为

    没有什么能够阻止我们用 React 来构建越来越大的应用,但是很快我们就会发现,想要保持代码简单,我们到处都需要进行状态的管理。

    尽管没有官方的解决方案,但是仍然有不少代码库依照 React 的设计理念解决了状态管理的问题。今天我们就要介绍两个这样的类库,并使用它们构建一个简单的小应用。

    Redux

    Redux 是一个极精简的库,它融合了 FluxElm 的设计理念,为应用状态提供容器功能。我们可以使用 Redux 管理任何应用的状态,使我们遵守以下准则:

    1. 状态( status )都保存在同一个存储( store )中;
    2. 动作( action )才能改变状态,状态不能直接被修改;

    Redux 存储的核心是一个函数,它将当前应用的状态和动作结合起来,创建应用的新状态。我们将这个函数称为 reducer

    我们的 React 组件负责向我们的存储发送动作,相应地存储通知组件何时需要重绘。

    ImmutableJS

    由于 Redux 不允许直接对应用的状态做修改,所以使用不可修改数据作为应用状态,可以禁止对状态的修改,就显得非常好用了。

    ImmutableJS 为我们提供了许多的不可修改的数据结构,以及对应的修改操作接口,其实现方式参考了 Clojure 和 Scala 中的现实,有很高的代码效率

    示例

    接下来,我们将使用 React 、 Redux 和 ImmutableJS 来创建一个简单的待办事项列表,它允许我们添加待办事项,且能够切换事项完成状态。

    你可以去 CodePen 看 SitePoint (@SitePoint )实现的一个 React, Redux & Immutable Todo 应用。

    也可以去 GitHub 上下载相应的代码。

    准备工作

    我们从建立项目文件目录开始,然后使用 npm init 指令初始化一个 package.json 文件。然 后我们开始安装我们需要的依赖库。

    npm install --save react react-dom redux react-redux immutable
    npm install --save-dev webpack babel-loader babel-preset-es2015 babel-preset-react
    

    我们使用 JSXES2015 的语法,所以我们会在 Webpack 进行模块绑定时,用 Babel 来编译 我们的代码。

    首先,我们新建一个 Webpack 的配置文件 webpack.config.js

    module.exports = {
      entry: './src/app.js',
      output: {
        path: __dirname,
        filename: 'bundle.js'
      },
      module: {
        loaders: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            query: { presets: [ 'es2015', 'react' ]}
          }
        ]
      }
    };
    

    然后我们需要扩充一下我们的 package.json 文件,加入一行 npm 脚本用来编译我们的代码。

    "script": {
      "build": "webpack --debug"
    }
    

    当我们需要编译代码时,只要执行一次 npm run build 命令即可。

    查看完整版:使用 Redux 秒做 todo-list 应用

    6 条回复    2016-10-13 16:17:40 +08:00
    ibigbug
        1
    ibigbug  
       2016-10-13 03:52:51 +08:00
    这年头 todo-list 比 todo 都多
    ericls
        2
    ericls  
       2016-10-13 05:33:48 +08:00   ❤️ 1
    @ibigbug todo-list 都快成标准的前框架 benchmark 了
    50vip
        3
    50vip  
       2016-10-13 09:31:18 +08:00
    dantegg
        4
    dantegg  
       2016-10-13 10:54:02 +08:00
    这种 example 一抓一大把
    hxtheone
        5
    hxtheone  
       2016-10-13 11:40:31 +08:00
    @ericls 蛤蛤非常同意
    wobuhuicode
        6
    wobuhuicode  
       2016-10-13 16:17:40 +08:00
    git clone 再 npm i 一下就完成了,所以叫做秒做…… todo-list 成了前端标配了……
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3475 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 00:08 · PVG 08:08 · LAX 17:08 · JFK 20:08
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.