目的
react-native-router-fluxを使っていたが、むしゃくしゃしたので別のルーティングライブラリを使ってみようと@expo/ex-navigationに手を出したが思ったよりreduxとの連携に躓いたのでメモ程度に動作するコードを示す.
コード
プロジェクトはcreate-react-native-appで作られた前提で始める.
エントリポイントはApp.jsでsrc/に中身を書いていく.
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がシンプルに使えていいかもしれない...