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是我自己封装的。希望对各位初学者有帮助,我继续去弹吉他啦



发布了14 篇原创文章 · 获赞 1 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览