image.png

首先需要安裝redux，react-redux，babel-plugin-transform-decorators-legacy

babel-plugin-transform-decorators-legacy是什么？
他是用來支持@寫法的

安裝完以后在.babelrc里面設置

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-decorators-legacy"]
    }
  }
}

首先創建一個redux，我們就取名為num.redux.js

image.png

內容為

const ADD_TEM="升溫";

const initState={
    number:20
}

export function num(state=initState,action) {
    switch (action.type){
        case "升溫":
            return {...state,number:state.number+1}
        default:
            return state;
    }
}

export function addTem() {
    return {type:ADD_TEM};
}

然后創建一個reducer，把reducer函數去過來，交給combineReducers管理

image.png

import {combineReducers} from "redux";
import {num} from "./redux/num.redux";
export default combineReducers({num});

現在開始寫自己的文件，我們新建container文件夾，新建文件Temp.js

image.png

內容為

import React,{PureComponent} from "react";
import {View,Text,Button} from "react-native";
import {connect} from 'react-redux';

import {addTem} from "../redux/num.redux";

@connect(state=>state.num,{addTem})
export default class Temp extends PureComponent{
    render(){
        return (
            <View>
                <Text>現在溫度{this.props.number}</Text>
                <Button onPress={this.props.addTem} title={"升溫"}></Button>
            </View>
        )
    }
}

我們在App.js里面引入redux，react-redux，reducer，并寫成如下的樣子，在里面引入Temp即可

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {createStore} from "redux";
import {Provider} from "react-redux";

import reducer from "./reducer";
import Temp from "./container/Temp";

const store=createStore(reducer)
export default class App extends Component<Props> {
  render() {
    return (
        (<Provider store={store}>
          <Temp/>
        </Provider>)
    );
  }
} 

redux只能處理同步，要處理異步我們還要添加redux-thunk中間件

npm install redux-thunk --save-dev

然后使用applyMiddleware開啟thunk中間件

image.png

到這里reactnative引入redux基本就大工告成
如果有什么問題，歡迎大家給我留言

react-native整合系列（二）——集成Ant Design Mobile RN http://www.lxweimin.com/p/f8b6a07e108f
react-native整合系列（三）——集成react-native-router-flux http://www.lxweimin.com/p/35cdf1237017