https://github.com/unadlib/iflow-docs-cn

The Chinese version of iFlow documents.
https://github.com/unadlib/iflow-docs-cn

Last synced: 5 months ago
JSON representation

The Chinese version of iFlow documents.

• Host: GitHub
• URL: https://github.com/unadlib/iflow-docs-cn
• Owner: unadlib
• License: mit
• Created: 2018-01-12T21:01:43.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-01-30T01:57:14.000Z (over 8 years ago)
• Last Synced: 2025-07-06T20:52:49.373Z (12 months ago)
• Homepage: http://cn.iflow.js.org
• Size: 816 KB
• Stars: 2
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


iFlow是一个简洁和强大的状态管理库，iFlow没有任何依赖包，且非常小(5k)。

[![Travis](https://img.shields.io/travis/unadlib/iflow.svg)](https://travis-ci.org/unadlib/iflow)

[![Coverage Status](https://coveralls.io/repos/github/unadlib/iflow/badge.svg?branch=master)](https://coveralls.io/github/unadlib/iflow?branch=master)

[![npm](https://img.shields.io/npm/v/iflow.svg)](https://www.npmjs.com/package/iflow)

[![Join the chat at https://gitter.im/unadlib/iflow](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/unadlib/iflow?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

>[从0开始5分钟完成TODO](http://cn.iflow.js.org/#%E4%BB%8E0%E5%BC%80%E5%A7%8B%E4%BA%94%E5%88%86%E9%92%9F%E5%AE%8C%E6%88%90todo)

### 特性

* **🎯支持普通function和class** - 它很简单，同时也可设计符合各种需求状态管理架构。

* **🏬Store组合** - Store Tree可以很容易共享操作Store节点。

* **⚡动态和热插拔** - 可自由插拔State和Action。

* **💥支持异步function以及其他类型的function** - 可任意组合Action或由内部其他内部Action相互组合。

* **🚀强大的中间件** - 中间件可以处理State几乎任何事件。

* **🔥Store支持immutable** - Store是支持被处理成immutable的Store。

它是动态的和可扩展的, 你可以直接使用它来添加、删除和修改State和Action。它是 **Mutable** 结构, 支持普通function和class, 并且易于面向对象编程。如果使用React, 则需要使用 [react-iflow](https://github/unadlib/react-iflow)连接器。

接下来我们会介绍以下几个方面的情况，让你对iFlow有深入的了解。

* [概念与原则](/docs/introduction/ConceptsPrinciples.md)

* [优点](/docs/introduction/Benefits.md)

* [例子: Counter](/docs/introduction/Examples.md) 

### 从0开始五分钟完成TODO

1.首先我们先完成快速一个TODO项目配置和基本npm包依赖

```bash

mkdir example && cd example

yarn init -y

yarn add -D parcel-bundler babel-cli babel-preset-react babel-preset-env

yarn add react react-dom iflow react-iflow

```

2.然后我们完成一个babel配置文件和App入口文件index.html

```bash

echo '{"presets": ["env","react"]}' > .babelrc

echo '
' > index.html

```


3.接着我们完成一个简单的TODO

```bash

cat < index.js

import React from 'react'

import ReactDOM from 'react-dom'

import iFlow from 'iflow'

import flow from 'react-iflow'

const store = iFlow({

    todo: [],

    add(text){this.todo.push({text})},

    toggle(item){item.completed = !item.completed}

}).create()

const App = flow(store)(class extends React.Component {

    render() {

        const {todo,add,toggle} = this.props.store

        return (

            


                this.input=ref}/>

                {add(this.input.value);this.input.value=''}}>Add

                


                    {todo.map((item,key)=>(
toggle(item)}>{item.text}
))}

                
 

            

        )

    }

})


ReactDOM.render(,document.getElementById('app'))

EOF

```

4.最后我们运行起来, 嘿嘿!🎉🎉🎉

```bash

npx parcel index.html

```