Reactに関する個人的テンプレート。

追記（2018年11月30日）

このテンプレートはreact-navigationのV2を利用しています。cloneしてnpm installする場合は問題ありませんが、新規で作成する場合は（V3の場合）、createAppContainerでNavigationをラップしてやる必要があります。

サンプルコードを更新しました（git以外）。

やること

下記を順を追って実装する。それぞれにgitのtagをつける。

とりあえず表示 1-1
StackNavigatorの利用 1-2
Reduxの利用
- stateの共有 1-3
- メソッドの共有 1-4
Thunkによる非同期APIリクエスト 1-5
Sagaによる非同期APIリクエスト 1-6

完成済みのソースがgithub上にあります（ソースコードは更新されていません）。
また、各STEPに対応したtagが設定してあります。目的に応じてtagを指定してcloneしてもいいでしょう。

git clone -b 1-4 https://github.com/eizaburo/react-temp-basic

reduxから利用したい場合は1-4をcloneすればいいでしょう。ただ、その状態だとno branchとなっているので、git checkout -b masterなどとしてから作業するのがよいでしょう。

準備

私はexpoを利用しています。インストールしていなければインストールします。

npm install -g expo

作業ディレクトリの作成して移動します。

expo init react-temp
cd react-temp

ディレクトリ名は別に何でもいいです。

とりあえず表示

ディレクトリとファイルの準備

App.jsと同じ階層にscreensディレクトリを作成し、Home.jsファイルを作成します。

mkdir screens
touch screens/Home.js

Home.js

Home.jsを実装します。画面の中心にHomeと表示するだけのものです。

import React from 'react';
import { View, Text, Button } from 'react-native';

class Home extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home</Text>
            </View>
        );
    }
}

export default Home;

App.js

Home.jsを読み込み表示します。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import Home from './screens/Home';

export default class App extends React.Component {
  render() {
    return (
      <Home />
    );
  }
}

表示を確認しておきます。

expo start

専用のWebが立ち上げるのでお好みの環境で確認を。
私は[Run on iOS simulator]で確認しています。

StackNavigatorの利用

続いてreact-navigationのStackNavigatorを実装してみます。StackNavigatorは一番シンプルなページ移動です（次へ、戻るという感じのやつ）。別にTabでもいいのですが、とりあえずStackで。

まずは必要なモジュールをインストールします。

npm install --save react-navigation
npm install

react-navigationの後は必ず再度npm installしないとエラーになるようです。何で？

ファイルの準備

移動先となる画面を作成します。ここではDetail.jsとします。

touch screens/Detail.js

Detail.js

Ditail.jsを実装します。と言ってもHome.jsのHomeという要素がDetailになっただけです。

import React from 'react';
import { View, Text, Button } from 'react-native';

class Detail extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Detail</Text>
            </View>
        );
    }
}

export default Detail;

App.js

では、App.jsにて実際にStackNavigatorを設定していきます。
HomeとDetailページを設定し、screenに各ファイルを設定します。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import Home from './screens/Home';
+import Detail from './screens/Detail';
+import { createStackNavigator, createAppContainer } from 'react-navigation';

+const Stack = createStackNavigator(
+  {
+    Home: {screen: Home},
+    Detail: {screen: Detail},
+  },
+  {
+    initialRouteName: 'Home'
+  }
+);

//v3より必要
+const AppContainer = createAppContainer(Stack);


export default function App() {
  return (
+    <AppContainer/>
  );
}

Home.js

なお、HomeにはDetailに移動するボタンを設置します（戻るボタンは自動生成されます）。

import React from 'react';
import { View, Text, Button } from 'react-native';

class Home extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home</Text>
+                <Button
+                    title='Link to Detail'
+                    onPress={() => this.props.navigation.navigate('Detail')}
+                />
            </View>
        );
    }
}

export default Home;

簡単ですが、以上です。

Reduxの利用（Stateの共有）

2,3ページくらいなら値の共有はpropsの受け渡しでいいのですが、複数のページになるとReduxの利用は避けられません。

モジュールのインストール

npm install --save redux react-redux

フォルダとファイルの準備

必要なフォルダやファイルを準備します。
フォルダやファイルの配置には好みがありますが、reducers, actionsといったredux wayを踏襲した雰囲気にしてみます。

また、storeの作成用にcreateStore.jsという専用ファイルを作成することにします（複数のreducerやmiddlewareを制御しやすいので）。

touch createStore.js
mkdir reducers
touch reducers/userReducer.js

createStore.js

今回はreducerを1つしか使いませんが、複数に対応できるようにcombineReducers()を利用して記述しておきます。
また、Middlewareについても後々利用するので、記述しておきます。

import { createStore as reduxCreateStore, combineReducers, applyMiddleware } from 'redux';
import userReducer from './reducers/userReducer';

export default createStore = () => {
    const store = reduxCreateStore(
        combineReducers({
            userData: userReducer,
        }),
        applyMiddleware(
            //
        )
    );
    return store;
}

userReducer.js

Userデータを保持するイメージなのでuserReducer.jsとしました。
内容は初期値を設定して、ただ返しているだけです。後々、actionでswitchするので、その部分も記述しています。

const initialState = {
    user: {
        name: 'hoge',
        age: 33,
    }
}

const userReducer = (state = initialState, action) => {
    switch(action.type){
        default:
            return state;
    }
}

export default userReducer;

App.js

App.jsにおいてReduxで値が共有できるよう、Providerタグで囲み、storeを設定します。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import Home from './screens/Home';
import Detail from './screens/Detail';
import { createStackNavigator, createAppContainer } from 'react-navigation';

+import { Provider } from 'react-redux';
+import createStore from './createStore';

const Stack = createStackNavigator(
  {
    Home: {screen: Home},
    Detail: {screen: Detail},
  },
  {
    initialRouteName: 'Home'
  }
);

//v3より必要
const AppContainer = createAppContainer(Stack);

+const store = createStore();

export default function App() {
  return (
+    <Provider store={store}>
      <AppContainer/>
+    </Provider>
  );
}

Home.js

Homeにおいて初期値が取得できるか試します。

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

class Home extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home</Text>
                <Button
                    title='Link to Detail'
                    onPress={() => this.props.navigation.navigate('Detail')}
                />
+                <Text>{this.props.state.userData.user.name}</Text>
            </View>
        );
    }
}

+const mapStateToProps = state => (
+    {
+        state: state,
+    }
+);

+export default connect(mapStateToProps, null)(Home);

// export default Home;

Detail.js

Detailにおいても同様に初期値が取得できるか試します。

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

class Detail extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Detail</Text>
+                <Text>{this.props.state.userData.user.name}</Text>
            </View>
        );
    }
}

+const mapStateToProps = state => (
+    {
+        state: state,
+    }
+);

+export default connect(mapStateToProps, null)(Detail);

// export default Detail;

どちらのページでも無事に表示できました。

Reduxの利用（メソッドの共有）

値の共有はできましたが、スタティックな値を共有するだけでは意味がありません。
ここではnameをアップデートするメソッドを実装してみます。

ディレクトリとファイルの準備

必要なディレクトリとファイルを作成します。

mkdir actions
touch actions/userAction.js

userAction.js

actionを返すaction createrを定義します。

export const updateName = name => (
    {
        type: 'UPDATE_NAME',
        name: name
    }
);

userReducer.js

reducerを適切に変更します。
現在のnameを受け取ったnameで更新します。

const initialState = {
    user: {
        name: 'hoge',
        age: 33,
    }
}

const userReducer = (state = initialState, action) => {
    switch(action.type){
+        case 'UPDATE_NAME':
+            return Object.assign({}, state, {
+                user: {
+                    name: action.name
+                }
+            });
        default:
            return state;
    }
}

export default userReducer;

Home.js

では、Homeで利用してみます。

import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';
+import { updateName } from '../actions/userAction';

class Home extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home</Text>
                <Button
                    title='Link to Detail'
                    onPress={() => this.props.navigation.navigate('Detail')}
                />
                <Text>{this.props.state.userData.user.name}</Text>
+                <Button
+                    title='updateName'
+                    onPress={() => this.props.updateName('foo@Home')}
+                />
            </View>
        );
    }
}

const mapStateToProps = state => (
    {
        state: state,
    }
);

+const mapDispatchToProps = dispatch => (
+    {
+        updateName: (name) => dispatch(updateName(name)),
+    }
+);

+export default connect(mapStateToProps, mapDispatchToProps)(Home);

// export default Home;

うまく動きました。

Thunkによる非同期処理

続いて外部APIからの値取得（というか非同期処理）を行ってみます。
まずは昔から定番のRedux-Thunkを利用してみます。

モジュールのインストール

npm install --save redux-thunk

createStore.js

createStore.jsにthunk利用のための記述を追加します。

import { createStore as reduxCreateStore, combineReducers, applyMiddleware } from 'redux';
import userReducer from './reducers/userReducer';
+import thunk from 'redux-thunk';

export default createStore = () => {
    const store = reduxCreateStore(
        combineReducers({
            userData: userReducer,
        }),
        applyMiddleware(
+            thunk,
        )
    );
    return store;
}

userAction.js

thunkではactionに（非同期）処理を書くことになります。

export const updateName = name => (
    {
        type: 'UPDATE_NAME',
        name: name
    }
);

+export const getHelloByThunk = () => async dispatch => {
+    const response = await fetch('http://www.bluecode.jp/test/api.php');
+    const json = await response.json();

+    dispatch({
+        type: 'GET_HELLO_BY_THUNK',
+        name: json.message
+    });

}

userReducer.js

取得した値でnameを更新するための記述をreducerに書きます。
thunkで更新されたとわかるよう、' by thunk'という文字列を追加しておきます。

const initialState = {
    user: {
        name: 'hoge',
        age: 33,
    }
}

const userReducer = (state = initialState, action) => {
    switch(action.type){
        case 'UPDATE_NAME':
            return Object.assign({}, state, {
                user: {
                    name: action.name
                }
            });
+        case 'GET_HELLO_BY_THUNK':
+            return Object.assign({}, state, {
+                user: {
+                    name: action.name + ' by thunk'
+                }
+            });
        default:
            return state;
    }
}

export default userReducer;

Home.js

HomeにてAPIから値を処理できるようにします。
ここではボタンを追加し、ボタンを押したら取得した値でnameを更新するようにします。

import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';
+import { updateName, getHelloByThunk } from '../actions/userAction';

class Home extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home</Text>
                <Button
                    title='Link to Detail'
                    onPress={() => this.props.navigation.navigate('Detail')}
                />
                <Text>{this.props.state.userData.user.name}</Text>
                <Button
                    title='updateName'
                    onPress={() => this.props.updateName('foo@Home')}
                />
+                <Button
+                    title='updateNameByThunk'
+                    onPress={() => this.props.getHelloByThunk('foo@Thunk')}
+                />
            </View>
        );
    }
}

const mapStateToProps = state => (
    {
        state: state,
    }
);

const mapDispatchToProps = dispatch => (
    {
        updateName: (name) => dispatch(updateName(name)),
+        getHelloByThunk: () => dispatch(getHelloByThunk()),
    }
);

export default connect(mapStateToProps, mapDispatchToProps)(Home);

// export default Home;

動きました。

Sagaによる非同期処理

小規模なうちはactionに書いておけばいいのですが、大規模あるいはテストのしやすさを考えるとRedux-Saga
を利用することになります。同じ処理をSagaで行ってみます。

モジュールのインストール

npm install --save redux-saga

フォルダとファイルの準備

Sagaのベストプラクティスがわかっていませんが、とりあえず以下のようにします。

mkdir sagas
touch sagas/saga.js

createStore.js

Sagaが利用できるよう記述を追加します。

import { createStore as reduxCreateStore, combineReducers, applyMiddleware } from 'redux';
import userReducer from './reducers/userReducer';
import thunk from 'redux-thunk';
+import createSagaMiddleware from 'redux-saga';
+import rootSaga from './sagas/saga';

export default createStore = () => {
    const sagaMiddleware = createSagaMiddleware();
    const store = reduxCreateStore(
        combineReducers({
            userData: userReducer,
        }),
        applyMiddleware(
            thunk,
+            sagaMiddleware,
        )
    );
+    sagaMiddleware.run(rootSaga);
    return store;
}

saga.js

Sagaによる処理を記述します。
やっていることは単純ですが、どこから記述し始めるのかが難しいです。。。

import { call, takeLatest, put, all, takeEvery } from 'redux-saga/effects';
import { updateName } from '../actions/userAction';

//callされる処理（普通の関数なのでテストしやすい）
const getHello = async () => {
    const response  = await fetch('http://www.bluecode.jp/test/api.php');
    const json = await response.json();
    return json;
}

//actionがマッチしたときの処理（2段階になっている）
function* requestHello(action){
    const json = yield call(getHello);
    yield put(updateName(json.message + ' by saga'));
}

//同系統の処理をまとめている
const helloSagas = [
    takeLatest('GET_HELLO_BY_SAGA', requestHello),
];

//たくさんの処理をまとめている
export default function* rootSaga(){
    yield all([
        ...helloSagas,
    ]);
}

userAction

処理の起点となるactionを記述。

export const updateName = name => (
    {
        type: 'UPDATE_NAME',
        name: name
    }
);

export const getHelloByThunk = () => async dispatch => {
    const response = await fetch('http://www.bluecode.jp/test/api.php');
    const json = await response.json();

    dispatch({
        type: 'GET_HELLO_BY_THUNK',
        name: json.message
    });

}

+export const getHelloBySaga = () => (
+    {
+        type: 'GET_HELLO_BY_SAGA',
+    }
+);

Home.js

Homeから呼び出せるよう処理を追加します。

import React from 'react';
import { View, Text, Button } from 'react-native';
import { connect } from 'react-redux';
+import { updateName, getHelloByThunk, getHelloBySaga } from '../actions/userAction';

class Home extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home</Text>
                <Button
                    title='Link to Detail'
                    onPress={() => this.props.navigation.navigate('Detail')}
                />
                <Text>{this.props.state.userData.user.name}</Text>
                <Button
                    title='updateName'
                    onPress={() => this.props.updateName('foo@Home')}
                />
                <Button
                    title='updateNameByThunk'
                    onPress={() => this.props.getHelloByThunk('foo@Thunk')}
                />
+                <Button
+                    title='updateNameBySaga'
+                    onPress={() => this.props.getHelloBySaga('foo@Saga')}
+                />
            </View>
        );
    }
}

const mapStateToProps = state => (
    {
        state: state,
    }
);

const mapDispatchToProps = dispatch => (
    {
        updateName: (name) => dispatch(updateName(name)),
        getHelloByThunk: () => dispatch(getHelloByThunk()),
+        getHelloBySaga: () => dispatch(getHelloBySaga()),
    }
);

export default connect(mapStateToProps, mapDispatchToProps)(Home);

// export default Home;

動きました。