REACT NATIVE + REDUX 初学者学习笔记 例子 @吉他码农

学习和开发RN 已经有2/3个月，刚开始觉得挺难，主要缺乏了ES6和REACT的基础语法，不过先实践再回去补基础是我的学习之道。现在已经在项目中都封装了挺多视图插件，用起来很方便，基本在视图交互基础功能都会用了，是时候学习数据交互那一块。

在网络一艘REACT NATIVE REDUX，都是混搭了REACT-REDUX和REACT-THUNK的实例，而纯RN+REDUX实例反而找不到，

也因为这样，导致刚开始看REDUX的使用方法感觉很奇怪，很模糊，经过几天的不停找资料和尝试，总结了下面一个可行又清晰简单的代码，希望对大家有帮助！

以后我改名叫 吉他码农，希望你们能记得我，关注我，我有空发表一些关于RN的经验心得分享。大道至简

关于REDUX，大家可以看看一个中文网：http://cn.redux.js.org/

上面的流程图是网络转载的，很多小白可能觉得很复杂，网上中文资料也说的云里雾里的，其实这个很好理解，简单来说就是用户出发行为（例如调用一个函数），然后遵从REDUX的规范，传一个Action给reducer函数，形成一个新的store（其实就是state）并返回，最后触发视图（例如render()）刷新，完毕！

结果展示：

发放代码：

'use strict';

import React, { Component, PropTypes} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,

} from 'react-native';
import { createStore } from 'redux';
import ImageButton from '../components/ImageButton';


/*
 *  <span>吉他码农-苏赞</span> 原创，转载请注明
 *  http://blog.csdn.net/mcj010/
 */
class Counter extends Component {

  static propTypes = {
    value: PropTypes.number.isRequired,
    onIncrement: PropTypes.func.isRequired,
    onDecrement: PropTypes.func.isRequired,
  }

  render() {
    const { value, onIncrement, onDecrement } = this.props

    console.log(value);
    //view
    return (
      <View style={{ alignItems: 'center', }}>
        <Text style={{ fontSize: 24, }} >{value}</Text>
        <ImageButton
          text='+'
          onPress={onIncrement}
          textStyle={{ fontSize: 24, }}/>

        <ImageButton
          text='-'
          onPress={onDecrement}
          textStyle={{ fontSize: 24, }}/>
      </View>
    );
  }
}

//reducer函数，state默认值是0
function counter(state = 0, action) {
  //根据传进来的action改变state的值
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

//传入reducer函数创建store
const store = createStore(counter);


export default class Redux extends Component {

  constructor(props) {
    super(props)
    this.state = {
      value: 0,
    }
  }

  componentDidMount = () => {

    //设置监听，当store的state值更新，刷新render
    store.subscribe(() =>
      this.setState({ value: store.getState() }));
  }
  render() {

    return (<Counter
      value={this.state.value}
      //传说中的调用 store.dispatch(action)  
      onIncrement={() => store.dispatch({ type: 'INCREMENT' }) }
      onDecrement={() => store.dispatch({ type: 'DECREMENT' }) }
      />
    );
  }


}

button组件请自己改一下用RN原来的即可，这个button是我自己封装的。希望对各位初学者有帮助，我继续去弹吉他啦