一个简单的reactnative + redux 使用

最近在试着学习reactnative,公司应用比较重,采用了redux的方案,传统原生转到web思维

还是比较费劲的,所以分享下一个简单的redux的demo,希望有助于 redux的使用.

react-native的环境搭建就不bb了,自己init 一个reactnative的实例出来先,并装好我们要使用的库

reactnative init easyRedux
npm install redux --save
npm install react-redux --save
npm install redux-thunk --save

分为4个部分,actions,components,containers,reducers

components 是我们要使用的组件,从这一层开始看

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
const styles = StyleSheet.create({
    button:{
        width:50,
        height:50,
        backgroundColor:'red'
    },
    view:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
        flexDirection:'row'
    }
});
export default class Counter extends Component{
    constructor(props){
        super(props);
    }
   render(){
       const {counterReducer,increment,decrement} = this.props;
       return(
           <View style={styles.view}>
           <TouchableOpacity onPress={increment} style={styles.button}>
           <Text>up</Text>
           </TouchableOpacity>
           <Text>{counterReducer}</Text>
            <TouchableOpacity onPress={decrement} style={styles.button}>
            <Text>down</Text>
           </TouchableOpacity>
           </View>
       );
   } 

}

我们注册了一个组件Counter,里面是两个有点击效果的text 加减和一个显示结果的text

我们从props里传入了2个action方法(加法和减法),和一个conterReducer的显示

在action里我们定义了2个动作,actionTypes里是两个const字符串

import * as types from './actionTypes';
export function increment(){
    return{
        type:types.INCREMENT
    };
}
export function decrement(){
    return{
        type:types.DECREMENT
    };
}

action触发的操作在 ,通过判断类型,来执行不同的reducer操作

import * as types from '../actions/actionTypes';
const initialState = {
    count:0
};
export default function counterReducer(state = initialState,action = {}){
    switch(action.type){
        case types.INCREMENT:
        return{
            ...state,
            count:state.count+1
        }
        case types.DECREMENT:
        return{
            ...state,
            count:state.count-1
        }
        default:
        return state;
    }

}

然后我们要在我们的容器里,引入我们的组件component

import React,{Component} from 'react';
import {bindActionCreators}from 'redux';
import Counter from '../components/counter';
import * as counterActions from '../actions/counterActions';/* 引入actions*/
import {connect} from 'react-redux';

class CounterApp extends Component{
    constructor(props){
        super(props);
    }
    render(){
        const {state,actions} = this.props;/* 解包state和actions*/
        return(
            <Counter counterReducer = {state.count} {...actions}/>
        ); 
    }
}
/* 连接reducer 和 actions*/
export default connect(
    (state=>({state:state.counterReducer})),
    (dispatch)=>({actions:bindActionCreators(counterActions,dispatch)})
)(CounterApp);

最后包装成app,让index.ios.js应用

import React,{Component} from 'react';
import {createStore,applyMiddleware,combineReducers}from 'redux';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';
import CounterApp from './counterApp';
import * as reducers from '../reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const reducer = combineReducers(reducers);
const store = createStoreWithMiddleware(reducer);

export default class App extends Component{
    render(){
        return(
            <Provider store = {store}>
            <CounterApp />
            </Provider>
        );
    }
}

最近比较忙,先简单的放上来,等之后有空开始扩展和详细介绍,做个随意的开篇

全部频道

一个简单的reactnative + redux 使用