无法侦听与 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

我得到了

的错误

Cannot listen for a key that isn't associated with a Redux store. First call createReactNavigationReduxMiddleware so that we know when to trigger your listener

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

谢谢

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 制作一个包装器 class 并将商店绑定到它

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>
    )
  }
}

我已经为 same.Please 制作了一个示例入门工具包，查看下面的 link

Sample Starter Kit

Answer 2

对于那些遇到困难的人，请确保 App.js 中的导入 class 是第一个

import configureStore from '../Redux/configureStore'

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

import ReduxNavigation from '../Navigation/ReduxNavigation'

（你调用 createReduxBoundAddListener 的地方）

否则你会一直收到这条消息

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

Cannot listen for a key that isn't associated with a Redux Store - React Navigtion

react-native

react-navigation