react-native添加redux支持

redux简介

redux是一个用于管理js应用状态的容器。redux出现时间并不是很长，在它出现之前也有类似功能的模块出现，诸如flux等等。redux设计的理念很简单，似乎最初这个开发团队就有让redux可以方便融入在server, browser, mobile client端的打算。目前在github上redux-*的第三方中间件、插件越来越多。如果React项目中想使用redux，那么就有react-redux插件来完成配合。

转自：http://blog.csdn.net/xiangzhihong8/article/details/71512756

项目实例

 
如图所示，这是一个非常简单的例子：只有两个文件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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

添加redux

1，要想使用redux的相关功能，首先需要添加redux相关依赖库。直接使用npm install 命令安装。默认情况下会将安装的信息保存到package.json里面。

"dependencies": {    ...    "react-redux": "^4.4.5",    "redux": "^3.5.2",    "redux-logger": "^2.6.1"},
1
2
3
4
5
6
7
1
2
3
4
5
6
7

2，创建actionsTypes.js用来定义所有的action名称, 定义三个常量action, 分别表示增加、减小、重置。

export const INCREASE = 'INCREASE';export const DECREASE = 'DECREASE';export const RESET = 'RESET';
1
2
3
4
1
2
3
4

actions.js代码如下：

import { INCREASE, DECREASE, RESET } from './actionsTypes';const increase = () => ({ type: INCREASE });const decrease = () => ({ type: DECREASE });const reset = () => ({ type: RESET });export {    increase,    decrease,    reset}
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11

3，创建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});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

至此，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>    );  }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

修改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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

最后在index.ios.js添加app引入。

import { AppRegistry } from 'react-native';import App from './app';AppRegistry.registerComponent('Helloworld', () => App);
1
2
3
4
5
1
2
3
4
5

这样，我们就将redux引入到了React Native中。commond+R运行, command+D打开chrome浏览器调试, 可以看到redux-logger把每个action动作都打和state的前后变化印出来。 

参考：深入理解redux