React Native Typescript Redux快速搭建

react-native-redux入门 & 使用Visual Studio Code和typescript 开发调试React Native项目 之后,这次我们继续 React Native Typescript 系列

项目初始化的细节就不一一叙述的,感兴趣的同学可以看下上面两篇博客,我把最终代码放到了 我的github仓库上,里面有每个步骤的修改的代码记录。

原来的样子

首先我们修改我们的src/index.tsx 实现一个简单的计数器 代码如下

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
import React, { Component } from "react";
import {
StyleSheet,
Text,
View,
Button,
Platform
} from "react-native";
interface Props {
}
interface State {
count:number;
}
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<Props, State> {
constructor(props:Props)
{
super(props);
this.state={count:0};

}
add = ()=>{

this.setState({count:this.state.count+1})
};
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native&typescript!</Text>
<Text style={styles.instructions}>To get started, edit src/App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Text style={styles.instructions}>{this.state.count}</Text>
<Button onPress={this.add} title="add" ></Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

开始redux

接下来我们按照Redux管理React数据流实现代码
在开始之前我们学习下Redux
react-native-typescript-redux-201877184819
在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state。组件所有的行为通过Actions来触发,然后Action更新Store中的state,Store根据state的变化同步更新React视图组件。
需要注意的是:
在主入口文件index.tsx中,通过Provider标签把Store和视图绑定:

<Provider store={store}>
    //项目代码
</Provider>

actions

指全局发布的动作指令,主要就是定义所有事件行为的

首先声明定义 actionsTypes
actionsTypes.ts

1
export const ADD ="ADD";

新建actions.ts

1
2
3
4
5
6
import {ADD} from './actionsTypes';

const add=()=>({type:ADD})
export {
add
}

reducers

Store是如何具体管理State呢?实际上是通过Reducers根据不同的Action.type来更新不同的state,即(previousState,action) => newState。最后利用Redux提供的函数combineReducers将所有的Reducer进行合并,更新整个State树

会用到的state类型
statesTypes.ts

1
2
3
export class CounterState{
count:number
}

新建reducers.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { combineReducers } from 'redux';
import {ADD} from './actionsTypes';
import {CounterState} from './statesTypes';

const defaultState={
count:0
} as CounterState;
function counter(state=defaultState,action:any){
switch (action.type) {
case ADD:
return {...state,count:state.count+1};
default:
return state;
}
}
export default combineReducers({
counter:counter
});

store

在 Redux 应用中,只允许有一个 store 对象,管理应用的 state.可以理解为一个存放APP内所有组件的state的仓库.
可以通过 combineReducers(reducers) 来实现对 state 管理的逻辑划分(多个 reducer)。

新建store.ts

1
2
3
4
5
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';

const store=createStore(rootReducer);
export default store;

Provider

Provider 本身并没有做很多事情,只是把 store放在 context 里罢了,本质上 Provider 就是给 connect 提供 store 用的。

新建index.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
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>
);
}
}

Container

利用Container容器组件作为桥梁,将React组件和Redux管理的数据流联系起来。Container通过connect函数将Redux的state和action转化成展示组件即React组件所需的Props。

新建home.tsx

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
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Button,
Platform
} from 'react-native';
import { connect, DispatchProp } from 'react-redux';
import { add } from './actions';
import {CounterState} from './statesTypes';

interface State {
}
type Props=CounterState&DispatchProp
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
class Home extends Component<Props, State> {
constructor(props:Props)
{
super(props);
}
_add = ()=>{

this.props.dispatch(add())
};
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native&typescript!</Text>
<Text style={styles.instructions}>To get started, edit src/App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Text style={styles.instructions}>{this.props.count}</Text>
<Button onPress={this._add} title="add" ></Button>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

const mapStateToProps = (state:any) => (
state.counter
)

export default connect(mapStateToProps)(Home);

最终代码在 https://github.com/YahuiWong/react-native-typescript/tree/114aefbd3fbb96f9c67db068b340b908ed54276d
可在线查看