LoginSignup
8
8

More than 3 years have passed since last update.

@zaburo(zaburo)

RN応用編３：Reduxで値の取り回し

Last updated at Posted at 2018-10-28

応用編２の続きです。

シリーズ

概要

応用の本命です。
画面が増えてくると画面間での値や関数の共有が標準のpropsによる共有ではしんどくなってきます。
そこで値や関数を一言管理できるreduxを利用してみます。
また、Reduxが入れ子にしたページ等でも正しく機能するか確認します。

本当はReduxの利用が応用のメインですが、余計な記事（応用１、応用２）を書いてしまいました。

reduxを使うための準備

まずはReduxを利用するためのモジュールをインストールします。

reduxのインストール

reduxとreactで使うためのモジュールです。

npm install --save redux react-redux

いちおうデバッガも入れておきます。なお、デバッガのセットアップや利用についてはこちらの記事を参考にしてください。

デバッガのインストール

npm install --save-dev remote-redux-devtools

ファイルの整理（必須ではないのですが）

Reduxを利用を開始する前に記述量が多くなったApp.jsからStackやTabなど、画面制御（ルーティング）に関する部分をrouter.jsに切り出すことにします。

App.jsと同じ階層にrouter.jsを作成し、App.jsより以下の部分を切り出し、各constを外部から使えるようにexportしてやります。

router.js

切り出すだけなく、各定数を外部から利用できるようexportしておきます。

router.js
import React from 'react';
import { createStackNavigator, createBottomTabNavigator, createDrawerNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/FontAwesome';

//import screens
import Single1 from './screens/Single1';
import Single2 from './screens/Single2';
import Stack1 from './screens/Stack1';
import Stack2 from './screens/Stack2';
import Tab1 from './screens/Tab1';
import Tab2 from './screens/Tab2';

+//stack
+export const Stack = createStackNavigator(
    {
        Stack1: { screen: Stack1 },
        Stack2: { screen: Stack2 },
    },
    {
        initialRouteName: 'Stack1'
    }
);

+//Tab
+export const Tab = createBottomTabNavigator(
    {
        Tab1: {
            screen: createStackNavigator({ Tab1: { screen: Tab1 } }),
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => <Icon size={24} name="home" color={tintColor} />
            }
        },
        Tab2: {
            screen: createStackNavigator({ Tab2: { screen: Tab2 } }),
            navigationOptions: {
                tabBarIcon: ({ tintColor }) => <Icon size={24} name="cog" color={tintColor} />
            }
        },
    }
);

+//drawer
+export const Drawer = createDrawerNavigator(
    {
        Stacks: {
            screen: Stack,
            navigationOptions: {
                drawerIcon: <Icon name="check" size={24} />
            }
        },
        Tabs: {
            screen: Tab,
            navigationOptions: {
                drawerIcon: <Icon name="check" size={24} />
            }
        },
        Single1: { screen: Single1 },
        Single2: { screen: Single2 },
    },
    {
        initialRouteName: 'Tabs'
    }
);

App.js

router.jsに機能を切り出すことでApp.jsはDrawerを呼び出すだけのシンプルな内容になります。

App.js
import React from 'react';
import { createAppContainer } from 'react-navigation';

import { Stack, Tab, Drawer } from './router';

export default class App extends React.Component {
    render() {

        //AppContainerでラップ
        const Layout = createAppContainer(Drawer);

        return (
            <Layout />
        );
    }
}

今後複雑な？プロセスが続くので、ここで一度、動作確認をしておきましょう。
機能は変更していないので切り出し前と同じ動きならOKです。

Reduxの利用のための最低限の実装と確認

Reduxの機構は慣れないと複雑なので、まず動作確認に必要な最低限の実装を行い、正しく動作しているか確認してみます。

ディレクトリファイルの追加

まずReduxを実装するためのディレクトリとファイルを追加しておきます。
まあ、ディレクリやファイルの配置の決定は宗教論争なところがありますが、ここでは以下にようにしたいと思います。

App.jsと同じ階層にactions, reducersディレクトリおよびcreateStore.jsファイルを作成。
さらにreducersの中にuserReducers.jsファイルを作成します。

コマンドだと以下の感じ。

mkdir actions reducers
touch createStore.js
cｄ reducers
touch userReducer.js

作成したファイルを順を追って利用していきます。

createStore.js

通常はreducderは複数になるかと思うので、reducerをまとめたりミドルウエアを定義してstoreを返すファイルを独立して作成します。

import { createStore as reduxCreateStore, combineReducers, compose, applyMiddleware } from 'redux';
import userReducer from './reducers/userReducer';
import composeWithDevTools from 'remote-redux-devtools';

export default function createStore() {
    const store = reduxCreateStore(
        combineReducers({
            appData: userReducer,
        }),
        composeWithDevTools(applyMiddleware(

        ))
    );
    return store;
}

userReducer.js

user関連のデータを扱うreducerを個別に定義します。
また、初期値の値（データ形式）も決定しておきます。実装はstateをそのまま返す簡単なものです。

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

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

export default userReducer;

次にApp.jsを編集します。
storeを受け取り、<Provider>にpropsとして渡します。<Provider>で囲まれた範囲で共有が可能になります。

App.js

App.js
import React from 'react';
import { createAppContainer } from 'react-navigation';

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

import { Stack, Tab, Drawer } from './router';

+
+const store = createStore();

export default class App extends React.Component {
    render() {

        //AppContainerでラップ
        const Layout = createAppContainer(Drawer);

        return (
+            <Provider store={store}>
                <Layout />
+
+            </Provider>
        );
    }
}

デバッガでの確認（ほんとに参考。無視していいです）

デバッガで確認するとuserReducer.jsで定義した初期値がstoreに保存されstateとして共有されているのが確認できます。

スクリーンショット 2018-10-28 6.29.38.png

Reduxによる値(state)の共有

Reduxでは値(state)と関数(dispatch)を共有できますが、個別に見ていきましょう。
まずはstateから。

Stack1.js

初期値がすでにstoreに保持されてるはずなので初期ページ（Stack1）で表示させてみます。
表示させるためにはコンポーネントと共有の設定をconnect()で接続する必要があります。

connect()でコンテナ化する処理を別ファイルにわける場合もありますが、今回は１つのファイルに記述します。

stateをstate: stateと同階層でマッピングすると、JSX内でthis.props.stateとして参照可能になります。今回はnameを表示したいので、this.props.state.appData.user.nameで参照できるはずです（階層名と各種定義の関係を理解しましょう）。

stateはmapStateToPropsで定義したもの。appDataはcreateStoreで定義したもの。user.nameはreducerのinitialStateで定義したものです。通常は必要な情報を必要な階層だけ（小さく）マップします。

Stack1.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
+import { connect } from 'react-redux';

class Stack1 extends React.Component {

    static navigationOptions = ({ navigation }) => ({
        title: 'Stack1',
        headerLeft: (
            <Icon name="bars" size={24} onPress={() => { navigation.openDrawer() }} style={{ paddingLeft: 20 }} />
        ),
    });

    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Stack1</Text>
                <Button
                    title='GoTo Stack2'
                    onPress={() => this.props.navigation.navigate('Stack2')}






                />
+
+                <Text>Reduxの値:{this.props.state.appData.user.name}</Text>
            </View>
        );
    }
}

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

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

　動作確認

初期値で設定したtanakaが表示されています。

スクリーンショット 2018-10-28 6.38.18.png

Reduxによる関数(dispatch)の共有

次に関数を共有してみましょう。nameをupdateするupdateName()関数を作成してみます。

actionsフォルダの中にuserAction.jsを作成し、以下の記述をします。
actionを定義し、それを返すaction create（関数）を定義しています。

actionの定義

userAction.js
export const updateName = name => {
    return {
        type: 'UPDATE_NAME',
        name: name
    }
}

reducerの定義（改修）

userReducerを編集します。
先程は最低限の実装しかしていませんでしたが、updateName()が呼び出された際の処理を追記します。
慣れないと？？？な感じですが大したことはしていません。

stateそのものは変更できないので、newStateというコピーを作り、そのコピーを編集した後、返しています（そうすることでstateが更新されます）。

userReducer.js
const initialState = {
    user: {
        name: 'tanaka',
        age: 33
    }
}

const userReducer = (state = initialState, action) => {
+    switch(action.type){
+        case 'UPDATE_NAME':
+            const newState = Object.assign({}, state); //現在のstateをnewStateにコピー
+            newState.user.name = action.name; //nameを更新
+            return newState; //返す
        default:
            return state;
    }
}

export default userReducer;

では初期ページ（Stack1）に関数を利用するボタンをついかしてみます。
ボタンを押すとnameがsuzukiに更新されます。どこのページで更新された値かわかるようにsuzuki@stack1としています。

Stack1.js

Stack1.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { connect } from 'react-redux';
+import { updateName } from '../actions/userAction';

class Stack1 extends React.Component {

    static navigationOptions = ({ navigation }) => ({
        title: 'Stack1',
        headerLeft: (
            <Icon name="bars" size={24} onPress={() => { navigation.openDrawer() }} style={{ paddingLeft: 20 }} />
        ),
    });

    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Stack1</Text>
                <Button
                    title='Goto Stack2'
                    onPress={() => this.props.navigation.navigate('Stack2')}
                />
                <Text>Reduxの値：{this.props.state.appData.user.name}</Text>
+                <Button
+                    title='Reduxによるnameのupdate'
+                    onPress={() => this.props.updateName('suzuki@stack1')}
+                />
            </View>
        );
    }
}

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

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

// export default Stack1;
+export default connect(mapStateToProps, mapDispatchToProps)(Stack1);

動作を確認してみます。
ボタンを押したらtanakaがsuzuki@stack1に変わりました。

スクリーンショット 2018-10-28 7.04.33.png

各画面で共有できるか確認

１ページで値を共有するのであればReduxは必要ありません。
複数ページで値や関数が共有できるか試してみます。とりあえずTab2.jsにしこんでみます。

nameを表示させつつ、yamada@tab2という内容でnameを更新するボタンをつけました。

Tab2.js

Tab2.js
import React from 'react';
import { View, Text, Button } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
+import { connect } from 'react-redux';
+import { updateName } from '../actions/userAction';

class Tab2 extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Tab2</Text>
+                <Text>Reduxの値：{this.props.state.appData.user.name}</Text>
+                <Button
+                    title='Reduxによるnameのupdate'
+                    onPress={() => this.props.updateName('yamada@tab2')}
+                />
            </View>
        );
    }
}

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

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

// export default Tab2;
+export default connect(mapStateToProps, mapDispatchToProps)(Tab2);

動作確認

Stack1で値を更新

まずStack1でnameを更新してみます。

スクリーンショット 2018-10-28 7.12.14.png

Tab1で値の反映確認と値の更新

その状態でTab1に遷移してみると、nameがsuzuki@stack1になっています。

スクリーンショット 2018-10-28 7.12.39.png

Tab2でnameを更新してみましょう。nameがyamada@tab2に変更されました。

スクリーンショット 2018-10-28 7.12.39.png

Stack1で値の確認

再びStack1に戻ってみるとnameがyamada@tab2になっています。
各ページにおいて変数や関数が共有されていることが確認できました。

スクリーンショット 2018-10-28 7.13.28.png

とりあえず以上です。

8
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
8
8