React-Native Redux初始状态值是否为新的reducer返回“ undefined”?

时间:2020-01-27 01:56:41

标签: javascript reactjs react-native redux react-redux

我正在使用本机入门工具包,并创建了一个具有 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);

0 个答案:

没有答案