目的

react-native-router-fluxを使っていたが、むしゃくしゃしたので別のルーティングライブラリを使ってみようと@expo/ex-navigationに手を出したが思ったよりreduxとの連携に躓いたのでメモ程度に動作するコードを示す.

コード

プロジェクトはcreate-react-native-appで作られた前提で始める.
エントリポイントはApp.jssrc/に中身を書いていく.

src/ducks/index.js
import { createNavigationEnabledStore, NavigationReducer as navigation } from '@expo/ex-navigation'
import { combineReducers, createStore, applyMiddleware, compose } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'

import foo from './foo' // this is sample reducer

const createStoreWithNavigation = createNavigationEnabledStore({
  createStore: compose(applyMiddleware(thunk, logger))(createStore),
  navigationStateKey: 'navigation'
})

export default createStoreWithNavigation(
  combineReducers({
    navigation,
    foo
  })
)
src/routes/index.js
import { createRouter } from '@expo/ex-navigation'
import Home from '../components/Home'
import Next from '../components/Next'

export default createRouter(() => ({
  home: () => Home,
  next: () => Next
}))

App.js
import React, { Component } from 'react'
import { NavigationContext, NavigationProvider, StackNavigation } from '@expo/ex-navigation'
import { Provider } from 'react-redux'

import store from './src/ducks'
import router from './src/routes'

const navigationContext = new NavigationContext({
  router,
  store
})

export default class App extends Component {
  render () {
    return (
      <Provider store={store}>
        <NavigationProvider context={navigationContext}>
          <StackNavigation initialRoute={router.getRoute('home')} />
        </NavigationProvider>
      </Provider>
    )
  }
}

何がしたかったか

ex-navigationでreduxを使いたくて、かつmiddlewareを入れたかった.
のだがREADME(Integrate with your existing Redux store)に書いてあるredux実装をするためのドキュメントではmiddlewareに触れておらず、普通に

const store = compose(
  applyMiddleware(thunk, logger)
)(createStore)(reducers)

としたstoreをProviderに渡してもダメだったので上記のようなコードになった.

あとがき

コードを書いたあと見つけたMediumの記事(参考リンク参照)がこの内容に更に味付けしたようなreduxとの連携について書いてある.
正直そっちの記事見たほうが良い.
黒魔術っぽくなってる気がしたのでなんだかんだでreact-native-router-fluxがシンプルに使えていいかもしれない...

参考リンク

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.