972
魔獸
REDUX-COW開發框架介紹
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
github 地址： https://github.com/cowjs/redux-cow ，
最後更新：2017-08-15 15:02:34