componentDidUpdate

Question

下面是相关文件。在减速器中，当它运行时...

 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类扩展了组件{

  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;

Answer 1

获得先前值的原因是您正在控制台记录先前值。

调用onLoginSuccess时，this.props.loggedIn的当前值将传递到console.log。我想如果您对它设置足够长的超时时间，那么它将表明它正在更新，但这并不是最好的检查方法。

componentDidUpdate

如果您要检查Redux状态是否正在更新，则应检查componentDidUpdate https://reactjs.org/docs/react-component.html#componentdidupdate

中发生的情况

当您在loggedIn的{{1}}中订阅mapStateToProps时，这意味着您的组件将在更新后为LoginForm.js接收新值。

在您的loggedIn中添加以下内容：

LoginForm.js

这将使您可以查看componentDidUpdate(prevProps, prevState) { console.warn('previous', prevProps.loggedIn, 'current', this.props.loggedIn) }的值的变化。

react-native-debugger

您可以使用loggedIn，其中包括redux检查工具。 https://github.com/jhen0409/react-native-debugger。这使您可以实时查看您的redux存储，这意味着您可以轻松跟踪更改，而不必诉诸react-native-debugger。但是，目前componentDidUpdate存在问题，这意味着它无法与react-native-debugger一起工作，尽管存在open pull request可以解决该问题。

中间件

或者，您可以在redux设置中添加一个中间件，该中间件将每个事件记录到控制台。 https://redux.js.org/advanced/middleware，我以前使用过react-native 0.58.+，它是可自定义的，根据您的用例，您可能会发现它适合您的需求。

减速机不改变状态

1 个答案:

componentDidUpdate

react-native-debugger

中间件