rn-launch

rn-launch

react-native 的redux框架

使用方法

• 定义reducer和action

import {fromJS} from 'immutable'
import {handleActions} from "rn-launch"

export function actions(store) {
    return {
        getData(name) {
            return {
                type: "UPDATE_NAME",
                name,
            }
        }
    }
}

export function reducer() {
    let initialData = fromJS({
        name: "李四",
        age: 26,
    });


    return handleActions({
        UPDATE_NAME(state, {name}) {
            return state.set("name", name);
        }
    }, initialData);
}

import React,{Component} from 'react';
import {Router, Scene, Stack,} from 'react-native-router-flux';
import {reducer as appReducer,actions as appActions} from './reducer';
import Launch,{Connect} from "rn-launch"

import {
    View,
    Text,
    TouchableHighlight,
} from 'react-native';

@Connect((state)=>{
    return state.app.toJS();
})
class Home extends Component{
    render(){
        let {name,age,actions}=this.props;
        return <TouchableHighlight onPress={()=>{
               actions.getData("新名字")
           }}>
           <Text>{name}  {age}</Text>
       </TouchableHighlight>
    }
}

//启动ReactNative
AppRegistry.registerComponent('MyReactNativeApp', () => Launch({
    app: appReducer
}, {
    app: appActions
}, <Router>
   <Stack key="root">
       <Scene  key="home" component={Home} title="Home"/>
   </Stack>
</Router>));