REDUX-COW 简介

Redux是基于redux的改良框架，抛弃了redux的各种灵活性，保留了最佳的编程实践。相比redux，REDUX-COW具有如下特点：

上手简单

只有 Starter , fire, addAction, addReducer 4个API， 理解成本和使用成本很低。

约定胜于规则

redux-cow没有redux的灵活性，而是提供了最好的使用方法，只要遵循，即可以写出人人都可理解的代码。

低耦合性

redux-cow 使用了只有一个中心的全局事件派发机制，任何组件，任何模块都可以一条命令直达数据处理中心。降低了模块间的耦合性。

REDUX-COW的事件流工作方式

任何一条事件的派发，都先到达action里进行处理，然后同样事件会到达reducer里处理，并最终更新到view.

安装

npm install redux-cow

API

Starter

Starter为程序入口的API， Starter只有一个方法 ，就是Starter.run。

import {Starter} from 'redux-cow'; import app from './app'; Starter.run(app);

任何一个基于redux-cow开发的程序，入口都一样

addAction

增加一个action处理器

import {addAction, fire} from 'redux-cow'; //静态payload的action，不带参数的action /* fire({ type: 'ADD_ONE' }) */ addAction({ type: 'ADD_ONE', payload: 1 }); // 动态payload /* fire({ type: 'ADD_CUSTOM', payload: 6 }) */ addAction({ type: 'ADD_CUSTOM', payload: (value)=> { return value; } });

addReducer

增加一个数据处理器， 每一条响应的action，都会产生一条响应的数据处理器

import {addReducer} from 'redux-cow'; /** * 这里的value，相当于state.value */ addReducer({ value(initValue=0, action){ switch (action.type) { case 'ADD_ONE': case 'ADD_CUSTOM': return initValue + action.payload; default: return initValue; } } });

addReducer 每一个key 值，都会在state里增加一个对应的值。以上的value，在 root view（app.js）的 this.props.value里可以获取到。

fire

fire是全局的命令派发器，可以在任意的模块里派发，并在reducer里进行处理。fire能派发三种命令

不带参数的静态命令

以下代码派发一条，静态命令

fire({ type: 'ADD_ONE' });

带参数的动态命令

fire({ type: 'ADD_CUSTOM', payload: 6 });

异步请求的命令

异步请求的命令，payload的值函数，异步请求的命令不会进一步被reducer处理以下为异步请求的命令

addAction({ type: 'FETCH_LIST_DATA', payload: (params)=>{ return ()=> { //更改Loading的状态 fire({ type: 'IS_LOADING_DATA', payload: true }); let d = [{value: "模拟数据" }]; setTimeout(()=> { fire({ type: 'IS_LOADING_DATA', payload: false }); fire({ type: 'FETCH_LIST_DATA_SUCCESS', payload: d }); }, 2000); } } });

默认的启动命令 APP_START

框架内置了程序的启动命令,希望在action和reducer里对改命令进行处理,做程序的数据初始化操作

import {APP_START} from '@ali/qdux'; addAction({ type: APP_START, payload: 'initValue' }) addReducer({ value(state="", action){ if(action.type == 'APP_START') { return action.payload; } return state; } })

app 文件

app为程序的入口View文件，和一般的view并无任何区别，通过Starter.run(app)后， app里会增加reduer里的所有属性在代码里直接获取即可

import {View, Text, Button} from 'nuke'; import {createElement, Component, render} from 'rax'; import {fire} from '@ali/qdux'; class Counter extends Component { onClick=(v)=> { fire({ type: 'BUTTON_CLICK', payload: v }) } render() { return ( <View style={{flex:1,flexDirection: 'row',justifyContent: 'flex-start'}}> <Button onPress={() => this.onClick(-1)}>减少</Button> <Text>{this.props.value}</Text> <Button onPress={() => this.onClick(1)}>增加 </Button> </View> ); } } module.exports = Counter;

更多的例子可以查看example里的例子。

在千牛里使用redux-cow框架

千牛5.10.0以后已经内置redux-cow,如果在开发里需要使用redux-cow修改webpack.config.js, externals里增加”redux-cow”: “commonjs redux-cow”即可。不需要安装redux-cow

使用自带的例子

例子使用qap-cli开发，执行以下命令既可以看到响应的例子

npm install qap-cli -g git clone https://github.com/cowjs/redux-cow.git cd ./examples npm install qap debug

最后

本框架暂时只支持rax， 将在下一步支持react更多例子源码请查看： https://github.com/cowjs/redux-cow/tree/master/examples/rax/src