Редуктор не меняющий состояние - PullRequest
Новая
       8

Редуктор не меняющий состояние

0 голосов
/ 29 января 2019

Ниже приведены соответствующие файлы.В редукторе, когда он запускается ... 

 return {
   loggedIn: action.loggedIn
 };

Я ожидал, что он заменит состояние этой информацией.Когда я запускаю этот код в LoginForm, я получаю вывод старого состояния. 

this.props.onLogin();
console.log(this.props.loggedIn);

Я надеюсь, что упускаю что-то простое здесь.Все остальное, кажется, работает так, как я ожидал.Я могу изменить состояние непосредственно в коммутаторе, используя ...

state.loggedIn = action.loggedIn;

И все работает как положено.Может кто-нибудь пролить свет на то, что я делаю неправильно?

Действие 

import { LOGGED_IN } from './actionTypes';

export const loggedIn = () => {
    return {
        type: LOGGED_IN,
        loggedIn: true,
    };
};

Редуктор 

import {
  LOGGED_IN
} from "../actions/actionTypes";

const initialState = {
  loggedIn: false,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case LOGGED_IN:
     return {
       loggedIn: action.loggedIn
     };
    default:
      return state;
  }
};

export default reducer;
import React, { Component } from 'react';
import { Text } from 'react-native';
import { Button, Card, CardSection, Input, Spinner } from './common';
import { Actions } from 'react-native-router-flux';
import firebase from '../Fire';
import { connect } from "react-redux";

import {
  loggedIn
} from "../store/actions";

Класс LoginForm LoginForm extends Component {

  onButtonPress() {
    this.onLoginSuccess();
  }

  onLoginSuccess() {
    this.props.onLogin();
    console.log(this.props.loggedIn);
    Actions.main({});
  }

  renderButton() {
    return (
      <Button onPress={this.onButtonPress.bind(this)}>
        Log in
      </Button>
    );
  }

  render() {
    return (
      <Card>
        <CardSection>
          <Input
            placeholder="user@gmail.com"
            label="Email"
        </CardSection>

        <CardSection>
          <Input
            secureTextEntry
            placeholder="password"
            label="Password"
          />
        </CardSection>

        <CardSection>
          {this.renderButton()}
        </CardSection>
      </Card>
    );
  }
}

const styles = {
  errorTextStyle: {
    fontSize: 20,
    alignSelf: 'center',
    color: 'red'
  }
};

const mapStateToProps = state => {
  return {
    loggedIn: state.loggedIn
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onLogin: () => dispatch(loggedIn()),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

configureStore 

import { createStore, combineReducers } from 'redux';

import prolinkReducer from './reducers/prolink';

const rootReducer = combineReducers({
    loggedIn: prolinkReducer
});

const configureStore = () => {
    return createStore(rootReducer);
};

export default configureStore;

1 Ответ

0 голосов
/ 29 января 2019

Причина, по которой вы получаете предыдущее значение, заключается в том, что вы записываете на консоли предыдущее значение.

Когда вызывается onLoginSuccess, текущее значение для this.props.loggedIn будет передано console.log.Я полагаю, если вы установите для него достаточно длительное время ожидания, то это покажет, что оно обновляется, но это не совсем лучший способ проверить.

componentDidUpdate

Если вы хотите проверитьчто ваше состояние приращения обновляется, вы должны проверить, что происходит в componentDidUpdate https://reactjs.org/docs/react-component.html#componentdidupdate

Когда вы подписываетесь на loggedIn в вашем mapStateToProps в вашем LoginForm.js, это означает, что выКомпонент получит новое значение для loggedIn после его обновления.

В вашем LoginForm.js добавьте следующее: 

componentDidUpdate(prevProps, prevState) {
  console.warn('previous', prevProps.loggedIn, 'current', this.props.loggedIn)
}

Это позволит вам увидеть значения для loggedIn по мере его изменения.

act-native-debugger

Вы можете использовать react-native-debugger, который включает в себя инструменты проверки избыточности.https://github.com/jhen0409/react-native-debugger. Это позволяет вам видеть ваш магазин приставок в режиме реального времени, то есть вы можете легко отслеживать изменения, не прибегая к проверке в componentDidUpdate.Однако в настоящее время существует проблема с react-native-debugger, которая означает, что он не работает с react-native 0.58.+, хотя существует открытый запрос извлечения , который устраняет проблему.

middleware

В качестве альтернативы вы можете добавить промежуточное программное обеспечение в вашу настройку приставки, которое регистрирует каждое событие на вашей консоли.https://redux.js.org/advanced/middleware, Ранее я использовал redux-logger, он вполне настраиваемый, и в зависимости от ваших вариантов использования вы можете найти, что он соответствует вашим потребностям.

...