redux在react-native上使用(一)--加入redux
来源:互联网 发布:怎么在淘宝里搜索店铺 编辑:程序博客网 时间:2024/06/05 03:53
原始项目
http://www.jianshu.com/p/8285ab025dc4
这是非常简单的一个项目, 就是一个计数器, 只有两个文件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, backgroundColor: 'yellow' }, 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, DECREASE, RESET} from './actionsTypes';// 原始默认stateconst 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, Text, View, TouchableOpacity} from 'react-native';import { connect } from 'react-redux';import { increase, decrease, 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
的前后变化印出来了,非常直观方便.
1 0
- redux在react-native上使用(一)--加入redux
- redux在react-native上使用(二)--加入redux-saga
- redux在react-native上使用(三)--加入redux-thunk
- redux在react-native上使用(五)--redux-actions使用
- redux在react-native上使用(四)--connect使用
- redux在react-native中的使用
- 在react-native中使用redux
- 在react-native中使用redux
- 在React-Native中使用redux
- redux 在 React-Native 工作中的使用
- 在react-native中使用redux
- react native 中 使用 Redux
- 学习react-native之加入redux
- react-Native-Experimental-Navigation-with-redux(一)
- React-Native 之 redux 与 react-redux
- React-Native 之 redux 与 react-redux
- react native redux
- react native redux counter
- hive-1.x在hadoop-2.x上的安装
- 论配置weblogic服务器
- Java中Set的使用
- vb.net 教程 5-14 图像处理之内存处理基础4
- 数组的一些简单运算
- redux在react-native上使用(一)--加入redux
- linux 下面的mysql client emma
- 安装openVC 错误 from . import cv2 ImportError: DLL load failed
- maven介绍
- Integer源码详解
- C#开源系统大汇总
- siblings ---选择兄弟集合(标签相同)
- python的str类方法
- redux在react-native上使用(二)--加入redux-saga