ReactNativeにReduxの環境構築をしてみる

プロジェクトの作成

$ react-native init redux_test

必要なライブラリのインストール

$ cd redux_test
$ npm install
$ npm install --save redux react-redux

シミュレータ起動

$ rm -rf ios/build
$ react-native run-ios

たまに前ビルドした結果が残っていてエラーになる時があるので、 ios/build以下を消してからシミュレータを実行するようにしています。

こんな画面が出ればOKです。

Reactのコード用のディレクトリを作成

$ mkdir src
$ cd src

Providerコンポーネントを作成

import reducers from './reducers';
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { View, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <Provider store={createStore(reducers)}>
        <View>
          <Text>Hello World</Text>
        </View>
      </Provider>
    )
  }
}

Providerコンポーネントのpropsにstoreを渡すことで、Store内に保存されたstateを子のコンポーネントに渡すことができます。

combineReducerの用意

$ mkdir src/reducers
$ touch src/reducers/index.js

import { combineReducers } from 'redux';

export default combineReducers({
  hoge: () => { return { name: 'hoge' } }
});

Reducerが無いとcreateStoreで怒られるので、仮のReducerを用意します。

index.ios.jsとindex.android.jsを書き換え

import {
  AppRegistry,
} from 'react-native';

import App from './src/App';

AppRegistry.registerComponent('redux_test', () => App);

元のコードを全部消して前に定義したApp.jsを読み込むように変更します。

これで上記のように画面の左上にHello Worldが表示されればReduxの最低限の環境構築は完了です。