Я использую исходный комплект для реагирования и создал новый модуль с AuthScreenState. js, AuthScreenView. js и AuthScreenViewContainer . js. По какой-то причине, когда я пытаюсь получить состояние редуктора нового модуля, состояние возвращает «неопределенное», когда я установил начальное состояние этого редуктора в AuthScreenState. js.
Я пытаюсь получить состояние в файле с именем Navigator. js. Я могу получить состояние других редукторов просто отлично, однако, когда я пытаюсь открыть console.log и получить состояние редуктора Auth Screen, он возвращает «isLoggedIn: undefined». isLoggedIn - это переменная состояния, к которой я хочу получить доступ, и я установил для ее начального состояния значение false, поэтому она должна возвращать false вместо undefined. Я пытаюсь понять это уже три дня и не могу. Кто-нибудь, пожалуйста, помогите мне.
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);
Навигатор. 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 />;
}
редуктор. 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 (Где создается store)
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);