React-Native Redux Значение начального состояния, возвращающее 'undefined' для нового редуктора? - PullRequest
2 голосов
/ 27 января 2020

Я использую исходный комплект для реагирования и создал новый модуль с 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...