继使用Visual Studio Code和typescript 开发调试React Native项目 之后,这次我们继续
React Native Typescript系列
项目初始化的细节就不一一叙述的，感兴趣的同学可以看下上面两篇博客，我把最终代码放到了 我的github仓库上,里面有每个步骤的修改的代码记录。
原来的样子
首先我们修改我们的src/index.tsx 实现一个简单的计数器 代码如下
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
在图中，使用Redux管理React数据流的过程如图所示，Store作为唯一的state树，管理所有组件的state。组件所有的行为通过Actions来触发，然后Action更新Store中的state,Store根据state的变化同步更新React视图组件。
需要注意的是：
在主入口文件index.tsx中，通过Provider标签把Store和视图绑定：
<Provider store={store}>
//项目代码
</Provider>
actions
指全局发布的动作指令，主要就是定义所有事件行为的
首先声明定义 actionsTypes
actionsTypes.ts
export const ADD ="ADD";
新建actions.ts
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
export class CounterState{
count:number
}
新建reducers.ts
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
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
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
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
可在线查看
如果觉得有用，请Star ，谢谢！
