React-native не рендерится с действием Redux

Question

У меня есть компонент, который должен перемещаться при аутентификации пользователя:

componentDidUpdate(prevProps, prevState) {
    if (this.props.authenticated) {
      this.props.navigation.navigate('Main')
    }
  }

Когда я отправляю authLogin, это должно вызвать повторное рендеринг, который обрабатывает навигацию:

export const authLogin = (username, password) => {
  return dispatch => {
    dispatch(authStart());
    axios.post(`http://10.0.2.2:8000/api/v1/rest-auth/login/`, {
      username: username,
      password: password
    })
      .then(response => {
        var token = response.data.key;
        try {
          AsyncStorage.setItem('token', token);
        } catch (err) {
          console.log(err)
        }
        dispatch(authSuccess(token));
      })
      .catch(err => {
        dispatch(authFail());
        console.log(err);
      })
  }
}

Здесьмой редуктор:

export default function (state = initialState, action) {
  switch (action.type) {
    case "AUTH_START": {
      return {
        ...state,
        authenticating: true,
      }
    }
    case "AUTH_SUCCESS": {
      return {
        ...state,
        authenticating: false,
        authenticated: true,
        token: action.token,
      }
    }
    case "AUTH_FAIL": {
      return {
        ...state,
        authenticating: false,
        authenticated: false,
      }
    }
    case "AUTH_LOGOUT": {
      return {
        ...state,
        authenticating: false,
        authenticated: false,
        token: null,
      }
    }
    default:
      return state
  }
}

и создатели действий:

export const authStart = () => ({type: "AUTH_START"})
export const authSuccess = token => ({type: "AUTH_SUCCESS", token})
export const authFail = () => ({type: "AUTH_FAIL"})

Моя консоль регистрирует, что отправляются действия Redux и что состояние изменяется, но повторной визуализации не происходит.Вот весь компонент:

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import LoginForm from '../components/LoginForm';
import { authLogin } from '../actions/authActions';

export class LoginScreen extends Component {
  handlePress = async (username, password) => {
    await this.props.authLogin(username, password);
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.authenticated) {
      this.props.navigation.navigate('Main')
    }
  }

  render() {
    return (
      <View style={styles.loginForm}>
        <LoginForm handlePress={this.handlePress} {...this.props} />
      </View>
    );
  }
}

const mapState = state => {
  return {
    authenticated: state.auth.authenticated
  }
};

const mapDispatch = dispatch => {
  return bindActionCreators({
    authLogin,
  }, dispatch)
};

export default connect(mapState, mapDispatch)(LoginScreen);

LoginScreen.propTypes = {
  authLogin: PropTypes.func.isRequired,
  authenticated: PropTypes.bool.isRequired,
};

const styles = StyleSheet.create({
  loginForm: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1
  }
});

и вот мой магазин:

import {  combineReducers } from 'redux';
import { createStore, applyMiddleware } from 'redux';
import { logger } from 'redux-logger';
import thunk from 'redux-thunk';
import auth from './auth'

const reducer = combineReducers({auth})
const enhancer = applyMiddleware(thunk, logger)
const store = createStore(reducer, enhancer)

export default store

Магазин подключен к провайдеру в App.js.

Answer 1

Я добавил еще один редуктор, который мгновенно его исправил.По всей видимости, редуксу не понравилось, что ФункцияcellReducers () имела только один аргумент.

т.е. изменил

const reducer = combineReducers({auth})

на

const reducer = combineReducers({auth, otherReducer})

Answer 2

Почему бы не поместить проверку подлинности и оператор навигации в handlePress ().

handlePress = async (username, password) => {
    await this.props.authLogin(username, password);
    if (this.props.authenticated) {
      this.props.navigation.navigate('Main')
    }
  }

После того, как authLogin () отправляет действие и состояние обновляется, вы можете проверить состояние аутентификации и перейти к пользователю.

Надеюсь, это поможет!