redux在react-native上使用(一)--加入redux

原始项目

这是非常简单的一个项目,就是一个计数器,只有两个文件package.json和index.ios.js,点击加1按钮数字值就会+1,点击减1按钮数字值就会-1,点击归零按钮则数字值置为0;

index.ios.js代码:

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Text,View,TouchableOpacity
} from 'react-native';

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 5 }
  }

  _onPressReset() {
    this.setState({ count: 0 })
  }

  _onPressInc() {
    this.setState({ count: this.state.count+1 });
  }

  _onPressDec() {
    this.setState({ count: this.state.count-1 });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.counter}>{this.state.count}</Text>
        <TouchableOpacity style={styles.reset} onPress={()=>this._onPressReset()}>
          <Text>归零</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.start} onPress={()=>this._onPressInc()}>
          <Text>加1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.stop} onPress={()=>this._onPressDec()}>
          <Text>减1</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,alignItems: 'center',justifyContent: 'center',flexDirection: 'column'
  },counter: {
    fontSize: 50,marginBottom: 70
  },reset: {
    margin: 10,backgroundColor: 'yellow'
  },start: {
    margin: 10,stop: {
    margin: 10,backgroundColor: 'yellow'
  }
})

AppRegistry.registerComponent('Helloworld',() => Main);

添加redux

先添加redux相关依赖库,在package.json里添加三个库并在目录下npm install:

"dependencies": {
    ...
    "react-redux": "^4.4.5","redux": "^3.5.2","redux-logger": "^2.6.1"
},

再创建actionsTypes.js用来定义所有的action名称,定义三个action,一个增加,一个减小,一个重置:

export const INCREASE = 'INCREASE';
export const DECREASE = 'DECREASE';
export const RESET = 'RESET';

创建actions.js,在里面创建三个action:

import { INCREASE,DECREASE,RESET } from './actionsTypes';

const increase = () => ({ type: INCREASE });
const decrease = () => ({ type: DECREASE });
const reset = () => ({ type: RESET });

export {
    increase,decrease,reset
}

创建reducers.js,根据需要在收到相关的action时操作项目的state:

import { combineReducers } from 'redux';
import { INCREASE,RESET} from './actionsTypes';

// 原始默认state
const defaultState = {
  count: 5,factor: 1
}

function counter(state = defaultState,action) {
  switch (action.type) {
    case INCREASE:
      return { ...state,count: state.count + state.factor };
    case DECREASE:
      return { ...state,count: state.count - state.factor };
    case RESET:
      return { ...state,count: 0 };
    default:
      return state;
  }
}

export default combineReducers({
    counter
});

创建store.js:

import { createStore,applyMiddleware,compose } from 'redux';
import createLogger from 'redux-logger';
import rootReducer from './reducers';

const configureStore = preloadedState => {
    return createStore (
        rootReducer,preloadedState,compose (
            applyMiddleware(createLogger())
        )
    );
}

const store = configureStore();

export default store;

至此redux的几大部分都创建完毕,下一步就是引入项目中. 创建app.js和home.js.

index.ios.js更改:

import { AppRegistry } from 'react-native';
import App from './app';

AppRegistry.registerComponent('Helloworld',() => App);

app.js

import React,{ Component } from 'righteact';
import { Provider } from 'react-redux';
import Home from './home';
import store from './store';

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

home.js在原来index.ios.js的代码上修改成如下:

import React,{ Component } from 'react';
import {
  StyleSheet,TouchableOpacity
} from 'react-native';
import { connect } from 'react-redux';
import { increase,reset } from './actions';

class Home extends Component {
  _onPressReset() {
    this.props.dispatch(reset());
  }

  _onPressInc() {
    this.props.dispatch(increase());
  }

  _onPressDec() {
    this.props.dispatch(decrease());
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.counter}>{this.props.counter.count}</Text>
        <TouchableOpacity style={styles.reset} onPress={()=>this._onPressReset()}>
          <Text>归零</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.start} onPress={()=>this._onPressInc()}>
          <Text>加1</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.stop} onPress={()=>this._onPressDec()}>
          <Text>减1</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  ...
})

const mapStateToProps = state => ({
    counter: state.counter
})

export default connect(mapStateToProps)(Home);

OK,大功告成,commond+R运行,command+D打开chrome浏览器调试,可以看到redux-logger把每个action动作都打和state的前后变化印出来了,非常直观方便.