我正在尝试在react本机应用程序中实现redux和导航,因此我试图遵循react-native-redux-helpers(here)的说明。
我似乎已经能够到达Root类实例化而没有任何问题,但是在组件尝试加载时收到错误消息:
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import { Provider, connect } from 'react-redux';
import rootReducer from './src/reducers/index';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import { reduxifyNavigator, createReactNavigationReduxMiddleware, createNavigationReducer } from 'react-navigation-redux-helpers';
import LoginScreen from './src/screens/LoginScreen';
import NotesScreen from './src/screens/NotesScreen';
const AppNavigator = createStackNavigator({
Login: {
screen: LoginScreen
},
Notes: {
screen: NotesScreen
}
})
const navReducer = createNavigationReducer(AppNavigator);
const appReducer = combineReducers({
rootReducer,
navReducer
})
const middleware = createReactNavigationReduxMiddleware('root', state => state.nav);
const App = reduxifyNavigator(AppNavigator, 'root');
const mapStateToProps = state => ({
state: state.nav
})
const AppWithNavigationState = connect(mapStateToProps)(App);
const store = createStore(appReducer, applyMiddleware(middleware));
class Root extends React.Component {
render() {
return (
<Provider store={store}>
<AppWithNavigationState />
</Provider>
)
}
}
答案 0 :(得分:1)
您需要像这样导出您的课程;
export default class Root extends React.Component {
render() {
return (
<Provider store={store}>
<AppWithNavigationState />
</Provider>
);
}
}
编辑:另外,您还需要更改组合式减速器;
const appReducer = combineReducers({
rootReducer,
nav: navReducer
})
因此,您可以在mapStateToProps中使用state:state.nav