无法侦听与Redux Store无关的密钥 - React Navigation

Question

我刚刚将React Navigation升级到1.0.0版。他们有新的方法来集成导航和Redux。这是我的代码

configureStore.js

export default (rootReducer, rootSaga) => {


const middleware = []
const enhancers = []

/* ------------- Analytics Middleware ------------- */
middleware.push(ScreenTracking)

const sagaMiddleware = createSagaMiddleware({ sagaMonitor })
middleware.push(sagaMiddleware)

const navMiddleware = createReactNavigationReduxMiddleware('root', state => state.nav)
middleware.push(navMiddleware)

/* ------------- Assemble Middleware ------------- */

enhancers.push(applyMiddleware(...middleware))

/* ------------- AutoRehydrate Enhancer ------------- */

// add the autoRehydrate enhancer
if (ReduxPersist.active) {
  enhancers.push(autoRehydrate())
}

const store = createAppropriateStore(rootReducer, compose(...enhancers))

// kick off root saga
sagaMiddleware.run(rootSaga)

return store
}

ReduxNavigation.js

const addListener = createReduxBoundAddListener('root')

// here is our redux-aware our smart component
function ReduxNavigation (props) {
  const { dispatch, nav } = props
  const navigation = ReactNavigation.addNavigationHelpers({
    dispatch,
    state: nav,
    uriPrefix: prefix,
    addListener
 })
 return <AppNavigation navigation={navigation} />
}
const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

ReduxIndex.js

export default () => {
  /* ------------- Assemble The Reducers ------------- */
  const rootReducer = combineReducers({
    //few reducers
  })

  return configureStore(rootReducer, rootSaga)
}

App.js

const store = createStore()

class App extends Component {
  render () {
    console.disableYellowBox = true
    return (
      <Provider store={store}>
        <RootContainer />
      </Provider>
    )
  }
}

export default App

我得到了一个错误

无法侦听与Redux存储无关的密钥。首先调用createReactNavigationReduxMiddleware，以便我们知道何时触发您的监听器

我希望有人可以帮助我，如果您需要更多信息，请告诉我

谢谢

Answer 1

在react-navigation文档中明确提到Note: createReactNavigationReduxMiddleware must be run before createReduxBoundAddListener。

无论何时在导入模块后使用模块，都会在初始化存储之前调用侦听器。

所以简单的修复就是将addListener放在ReduxNavigation函数中

// here is our redux-aware our smart component
function ReduxNavigation (props) {
  const addListener = createReduxBoundAddListener('root')
  const { dispatch, nav } = props
  const navigation = ReactNavigation.addNavigationHelpers({
    dispatch,
    state: nav,
    uriPrefix: prefix,
    addListener
 })
 return <AppNavigation navigation={navigation} />
}
const mapStateToProps = state => ({ nav: state.nav })
export default connect(mapStateToProps)(ReduxNavigation)

或者您可以为当前类创建一个包装类，并将商店绑定到此处

class RootContainer extends Component {
    render () {
        return (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
              <StatusBar translucent barStyle='dark-content' backgroundColor='#fff' />
              <ReduxNavigation/>
            </View>
        )
    }
}




 class App extends Component {
  render () {
    console.disableYellowBox = true
    return (
      <Provider store={store}>
        <RootContainer />
      </Provider>
    )
  }
}

我已经制作了相同的样品入门套件。请查看下面的链接

Sample Starter Kit

Answer 2

对于那些与之斗争的人，请确保App.js中的导入类是第一个

import configureStore from '../Redux/configureStore'

（您配置导航中间件的地方）和第二个或之后：

import ReduxNavigation from '../Navigation/ReduxNavigation'

（你调用createReduxBoundAddListener的地方）

否则你会继续留言