componentWillReceiveProps 状态与 redux 状态更新后的渲染状态不同

Question

首先是所有相关代码（单击文件名可查看该文件的完整源代码）。

LoginView.js

LoginView = class extends React.Component {
    handleLogin = (email, password) => {
        this.props.authenticationActionCreator.login(email, password);
    };

    componentWillMount () {
        console.log('componentWillMount', 'this.props.isAuthenticated', this.props.isAuthenticated);
    }

    componentWillReceiveProps () {
        console.log('componentWillReceiveProps', 'this.props.isAuthenticated', this.props.isAuthenticated);
    }

    render () {
        let {
            errorMessage,
            isAuthenticating
        } = this.props;

        return <div>
            <p>this.props.isAuthenticated: {this.props.isAuthenticated ? 'true' : 'false'}</p>
            <button onClick={() => {
                this.handleLogin('gajus@applaudience.com', 'nosyte');
            }}>Login</button>
        </div>;
    }
};

authentication.js（减速机）

if (action.type === 'AUTHENTICATION.LOGIN_SUCCESS') {
    return initialState.merge({
        isAuthenticated: true,
        token: action.data.token,
        user: action.data.user
    });
}

authenticationActionCreator.js

authenticationActionCreator.loginSuccess = (token) => {
    let decodedToken;

    // @todo Handle failure to decode token.

    decodedToken = jwtDecode(token);

    localStorage.setItem('token', token);

    return {
        type: 'AUTHENTICATION.LOGIN_SUCCESS',
        data: {
            token,
            user: decodedToken.user
        }
    };
};

流程简单：

用户打开页面。
用户单击调用 authenticationActionCreator.login 的 <button />。

console.log 输出为：

componentWillMount this.props.isAuthenticated true
action AUTHENTICATION.LOGIN_REQUEST @ 16:52:50.880
componentWillReceiveProps this.props.isAuthenticated true
componentWillReceiveProps this.props.isAuthenticated false
action AUTHENTICATION.LOGIN_SUCCESS @ 16:52:51.975

预期的 console.log 输出是：

componentWillMount this.props.isAuthenticated true
action AUTHENTICATION.LOGIN_REQUEST @ 16:52:50.880
componentWillReceiveProps this.props.isAuthenticated false
action AUTHENTICATION.LOGIN_SUCCESS @ 16:52:51.975
componentWillReceiveProps this.props.isAuthenticated true

问题是 render 有正确的状态（AUTHENTICATION.LOGIN_SUCCESS 之后的状态）而 componentWillReceiveProps 有旧的状态（AUTHENTICATION.LOGIN_REQUEST 之后的状态）。

我是最后一次调用 componentWillReceiveProps 以拥有与 render 方法相同的状态对象。

这是：

一个错误
我做错了什么
我的期望是错误的

?

Answer 1

我写了所有这些调试 trace/question 才记住 componentWillReceiveProps API 是：

componentWillReceiveProps: function(nextProps) {}

换句话说，我的 LoginView.js 例子应该是：

LoginView = class extends React.Component {
    handleLogin = (email, password) => {
        this.props.authenticationActionCreator.login(email, password);
    };

    componentWillReceiveProps (nextProps) {
        console.log('componentWillReceiveProps', 'nextProps.isAuthenticated', nextProps.isAuthenticated);
    }

    render () {
        let {
            errorMessage,
            isAuthenticating
        } = this.props;

        return <div>
            <p>this.props.isAuthenticated: {this.props.isAuthenticated ? 'true' : 'false'}</p>
            <button onClick={() => {
                this.handleLogin('gajus@applaudience.com', 'nosyte');
            }}>Login</button>
        </div>;
    }
};

componentWillReceiveProps 状态与 redux 状态更新后的渲染状态不同

componentWillReceiveProps state is different from render state after redux state update

redux

redux-thunk