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の最低限の環境構築は完了です。