Question

这是我组件的类：

import React, { Component }           from 'react';
import {connect}                      from 'react-redux';
import Button                         from '../UI/Button/Button';
import * as actions                   from '../../store/actions';

class Password extends Component {

    submitPassword=(e)=>{   
        e.preventDefault();
        this.props.submitPassword(this.state.password, this.props.levelNumber);
    }


    render() {        
        <Button clicked={this.submitPassword} >
            Submit password
        </Button>
    }

}
const mapStateToProps = state => {
    return {

    };
}
const mapDispatchToProps = dispatch => {
    return {
        submitPassword: (password,levelNumber) =>  dispatch(actions.submitPassword(password,levelNumber))
    };
}

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

这是我的动作：

export const submitPassword = () => {

    // HERE ALL MY LOGIC !!!

    return {
        level:undefined,
        type:actions.PASSWORD
    }
}

代码可以正常工作，包括参数和逻辑。
我想每次完成执行功能 submitPassword 的第三部分时，便会使用新道具刷新/重新加载。
是否可以将命令从操作发送到组件？我该怎么做？
我已经尝试过：

componentWillReceiveProps() {
    console.log("new props");
}

在我的组件中，但他不能参加活动。

Answer 1

如果组件具有道具，它将在道具更改时重新呈现。如果您想重新加载页面（location.reload（）），则需要添加一个中间件（例如redux sagas）来进行处理。这是因为动作是异步的。

Answer 2

要能够对更新的道具采取行动，您的组件将必须“观看”正在更改的道具。没有看到您的redux存储，我不知道您要完成什么，但是您应该可以将其添加到您的：

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

，然后在您的课堂上，假设您的redux设置正确，您可以通过console.log(this.props)来达到此目的。

React Redux：道具更改时，从ACTION重新加载组件

2 个答案: