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