react-native添加redux支持
redux简介
redux是一个用于管理js应用状态的容器。redux出现时间并不是很长,在它出现之前也有类似功能的模块出现,诸如flux等等。redux设计的理念很简单,似乎最初这个开发团队就有让redux可以方便融入在server, browser, mobile client端的打算。目前在github上redux-*的第三方中间件、插件越来越多。如果react项目中想使用redux,那么就有react-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,
backgroundColor: 'yellow'
},
stop: {
margin: 10,
backgroundColor: 'yellow'
}
})
AppRegistry.registerComponent('Main', () => Main);
添加redux
1,要想使用redux的相关功能,首先需要添加redux相关依赖库。直接使用npm install 命令安装。默认情况下会将安装的信息保存到package.json里面。
"dependencies": {
...
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"redux-logger": "^2.6.1"
},
2,创建actionsTypes.js用来定义所有的action名称, 定义三个常量action, 分别表示增加、减小、重置。
export const INCREASE = 'INCREASE';
export const DECREASE = 'DECREASE';
export const RESET = 'RESET';
actions.js代码如下:
import { INCREASE, DECREASE, RESET } from './actionsTypes';
const increase = () => ({ type: INCREASE });
const decrease = () => ({ type: DECREASE });
const reset = () => ({ type: RESET });
export {
increase,
decrease,
reset
}
3,创建reducers.js, 根据需要在收到相关的action时操作项目的state。
import { combineReducers } from 'redux';
import { INCREASE, DECREASE, 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
});
4,创建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的几大部分都创建完毕, 下一步就是引入项目中。 5,在项目中引入上面的文件。创建app.js和home.js 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
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);
最后在index.ios.js添加app引入。
import { AppRegistry } from 'react-native';
import App from './app';
AppRegistry.registerComponent('Helloworld', () => App);
这样,我们就将redux引入到了React Native中。commond+R运行, command+D打开chrome浏览器调试, 可以看到redux-logger把每个action动作都打和state的前后变化印出来。
参考:深入理解redux
- 口水先擦干!从大数据看外卖如何拯救“忙”与“宅”
- javascript:巧用eval函数组装表单输入项为json对象
- Django——model基础
- java学习:日期的运算
- ORACLE:写Function时,传入参数变量名的注意事项
- spring boot 登录注册 demo (二) -- 数据库访问
- spring boot 登录注册 demo (三) -- 前后端传递
- python装饰器大详解
- spring boot 登录注册 demo (四) -- 体验小结
- jenkins 时区设置
- 什么样的密码才是安全的?
- MAC本遭遇ARP攻击的处理办法
- nodejs 语法学习(持续更新)
- Django——模板层(template)(模板语法、自定义模板过滤器及标签、模板继承)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux用户登录日志查询 # 1 utmp、wtmp、btmp文件
- 浏览器同域名请求的最大并发数限制
- HTTP Strict Transport Security实战详解
- 深夜学算法之SkipList:让链表飞
- 自研安全工具之网页全链接爬取
- 实战远程文件同步(Remote File Sync)
- nginx cache的玩法
- PHP共享内存详解 前言
- 为了--force-pivoting参数,我问候了sqlmap开发者
- flexible array柔性数组、不定长的数据结构Struct详解
- 如何优雅打印nginx header和body
- Go的CSP并发模型实现:M, P, G
- Golang依赖管理工具:glide从入门到精通使用
- Redis的Multi的内幕真相
- shell expect权威指南和实战