继react-native-redux入门 & 使用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

1	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

1
2
3

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
可在线查看

亚辉的博客

React Native Typescript Redux快速搭建

原来的样子

开始`redux`化

actions

reducers

store

Provider

Container

原来的样子

开始redux化

actions

reducers

store

Provider

Container

开始`redux`化