Как передать новый реквизит из родительского компонента с помощью React и Redux

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

обычно структура моего редукционного хранилища выглядит следующим образом

{
  entities: {},
  ui: {},
  domain:{}
}

, например, когда вы выполняете submitPassword , вы выполняете всю логику и, в зависимости от результата, можете отправить другое действие для обновления.пользовательский интерфейс или часть домена, поэтому подключенные компоненты реагируют на эти изменения.

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

Доменная часть содержит информацию, относящуюся ко всему веб-приложению, такую ​​как информация для входа в систему и уведомления.

Answer 2

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

Так как приставка имеет неизменное состояние, вы всегда будете получать новое обновленное состояние, независимо от предыдущего. Таким образом, это заставит ваш компонент обновлять реквизиты для получения последнего состояния от избыточного. Это делается с помощью <Provider> оболочки, прикрепленной на корневом уровне.

Таким образом, ваши реквизиты будут иметь новые значения при каждом обновлении состояния избыточности.

Жизненный цикл, который вы ищете, static getderivedstatefromprops(). Этот жизненный цикл выполняется всякий раз, когда реквизиты меняются / обновляются.

Я сделал визуальную реализацию на лету, которая может помочь вам в изображении. Здесь Состояние Redux означает Магазин Redux