我正在使用本机入门工具包,并创建了一个具有 AuthScreenState.js , AuthScreenView.js 和 AuthScreenViewContainer.js的新模块。出于某种原因,当我尝试在 AuthScreenState.js 中设置该减速器的初始状态时,尝试获取新模块的减速器状态,该状态将返回“未定义”。
我正在尝试在名为 Navigator.js 的文件中获取状态。我可以很好地获取其他reducer的状态,但是当我尝试console.log并获取Auth Screen reducer的状态时,它返回“ isLoggedIn:undefined”。 isLoggedIn 是我要访问的状态变量,我已将其初始状态设置为false,因此它应该返回false而不是未定义。我已经尝试解决了三天,但我做不到。有人请帮助我。
AuthScreenState.js
const initialState = {
isLoggedIn: false,
};
// Actions
const LOG_IN_SUCCESS = 'AuthScreenState/LOG_IN_SUCCESS';
// Action creators
function logInSuccess() {
return { type: LOG_IN_SUCCESS };
}
export function logIn() {
return dispatch => {
// Connect to the API here
// If success
dispatch(logInSuccess());
};
}
// Reducer
export default function AuthScreenStateReducer(state = initialState, action = {}) {
switch (action.type) {
case LOG_IN_SUCCESS:
return Object.assign({}, state, {
isLoggedIn: true,
});
default:
return state;
}
}
AuthScreenView.js
/* eslint-disable class-methods-use-this */
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { colors, fonts } from '../../styles';
class AuthScreenView extends React.Component {
render() {
const { isLoggedIn } = this.props;
console.log("logged in from view: " + isLoggedIn);
return (
<View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: colors.whiteTwo,
alignItems: 'center',
justifyContent: 'center',
},
item: {
flexDirection: 'row',
justifyContent: 'space-between',
backgroundColor: 'white',
borderRadius: 5,
padding: 10,
marginRight: 10,
marginTop: 10,
},
emptyDate: {
height: 15,
flex: 1,
paddingTop: 30,
},
});
export default AuthScreenView;
AuthScreenViewContainer.js
// @flow
import { compose } from 'recompose';
import { connect } from 'react-redux';
import AuthScreenView from './AuthScreenView';
import { logIn } from './AuthScreenState';
export default compose(
connect(
state => ({
isLoggedIn: state.authScreen.isLoggedIn,
}),
dispatch => ({
logIn: () => dispatch(logIn()),
}),
),
)(AuthScreenView);
Navigator.js (我尝试访问状态的位置)
import React from 'react';
import { store } from '../../redux/store';
import AuthScreen from '../authScreen/AuthScreenViewContainer';
import AppNavigator from './RootNavigation';
export default function NavigatorView() {
// Get state from store
// WARNING: Only use this method to get state if no server-side rendering!
const state = store.getState();
const isLoggedIn = state.authScreen.isLoggedIn;
console.log("logged in: " + state.authScreen.isLoggedIn);
if (isLoggedIn == false) {
return <AppNavigator />;
}
return <AuthScreen />;
return <AppNavigator />;
}
reducer.js (在其中结合减速器的地方)
import { combineReducers } from 'redux';
// ## Generator Reducer Imports
import authScreen from '../modules/authScreen/AuthScreenState';
import gallery from '../modules/gallery/GalleryState';
import app from '../modules/AppState';
import calendar from '../modules/calendar/CalendarState';
export default combineReducers({
// ## Generator Reducers
authScreen,
gallery,
app,
calendar,
});
store.js (创建商店的地方)
import { applyMiddleware, createStore, compose } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import reducer from './reducer';
const enhancers = [
applyMiddleware(
thunkMiddleware,
createLogger({
collapsed: true,
// eslint-disable-next-line no-undef
predicate: () => __DEV__,
}),
),
];
/* eslint-disable no-undef */
const composeEnhancers =
(__DEV__ &&
typeof window !== 'undefined' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) ||
compose;
/* eslint-enable no-undef */
const enhancer = composeEnhancers(...enhancers);
const persistConfig = {
key: 'root',
storage,
blacklist: [],
};
const persistedReducer = persistReducer(persistConfig, reducer);
export const store = createStore(persistedReducer, {}, enhancer);
export const persistor = persistStore(store);