react-reduxを使ってみよう

stateの管理はComponentごとに行うことは可能ですが、stateの情報がたくさんになるとComponent毎に定義していては管理がしづらくなります。グローバルにstateにアクセスできるようにするのに、reduxが使用されます。まずはreduxに関連のあるlibraryをインストールします。

npm i --save redux react-redux

次にstoreを定義します。

import { createStore, compose, applyMiddleware } from 'redux';
import reducers from '../reducers';
const store = createStore(
  reducers,
  {},
  compose(
    applyMiddleware(thunk)
  )
);
export default store;

dummyのreducerを作る。空のデータを渡す、最小限のコードになります。

import { combineReducers } from 'redux';
export default combineReducers({
  auth: () => { return {}; }
});

Providerコンポーネントをrootコンポーネントで囲む。これによりProviderタグの下層のコンポーネントから、react-reduxのconnectヘルパーを使用してコンポーstoreにアクセスすることができます。

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { Text, View } from 'react-native';
import MainTabNavigator from './navigation/MainTabNavigator';
import store from './store';

export default class App extends Component {
  render() {
    return ();
  }
}