masarufuruyaのブログ

毎日学んだ知見をアウトプットするブログ

React-NativeにReduxの環境構築をしてみる

プロジェクトの作成

react-native init redux_test

react-reduxのインストール

npm install --save react-redux

一番親となるApp.jsを作成する

Reduxの機能であるStoreをcreateStoreで作成して、 ReactとReduxを繋げる役割をするreact-reduxが提供する Provider コンポーネントでstoreの値をReactコンポーネントに渡すことが出来る。

そして、Reducersを通してStoreの中のstateを更新していくことになる。

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

const App = () => {
  return (
    <Provider store={createStore(reducers)}>
      <View />
    </Provider>
  )
}

export default App;

次回はヘッダー用のReactコンポーネントを作成する