ReactNativeRedux導入

ReactNativeにReduxを導入するときの手順

ちなみにバージョンは、0.50.4。

パッケージインストール

redux-thunkも入れちゃいます。(入れなくてもOK)

npm install --save react react-redux redux redux-thunk

App.jsを変更

storeを作ってそれをProviderに渡す。

app.js

import React from 'react';
import ReduxThunk from 'redux-thunk';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import reducers from './src/reducers';
import Top from './src/containers/Top';

const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));

const App = () => (
  <Provider store={store}>
    <Top />
  </Provider>
);

export default App;

Reducers

私の場合は、combineReducers でまとめている。

src/reducers/index.js

import { combineReducers } from 'redux';

export default combineReducers({
  dummy: () => ({}),
});

それぞれディレクトリ作成

構成は、お任せします。 基本的には下記のディレクトリを作成すると思われる。(画面ごとに分けても良い)

• actions
• reducers
• components
• containers

以上で基本的な導入は完了です！