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

您无需始终传递新的道具即可访问redux状态。

由于redux具有不变的状态，因此无论前一个状态如何，您都将始终获得新的更新状态。因此，这将强制您的组件更新道具以从redux获取最新状态。这是通过附加在根级别的<Provider>包装器完成的。

因此，只要更新redux状态，您的道具就会具有新值。

您正在寻找的生命周期为static getderivedstatefromprops()。每当更改/更新道具时，都会执行此生命周期。

我实时进行了可视化实现，可以帮助您完成图片。这里的 Redux State 是指 Redux Store

Answer 2

通常，我的redux存储结构如下

 @Bean
public Step masterStep() throws Exception {

    return stepBuilderFactory.get("masterStep")
            .partitioner(slaveStep().getName(), partitioner())
            .step(slaveStep())
            .partitionHandler(partitionHandler(null))
            .taskExecutor(taskExecutor())
            .gridSize(GRID_SIZE)               
            .build();
}

@Bean
public Step slaveStep() {

    return stepBuilderFactory.get("slaveStep")
            .<WorkItem, ReportData>chunk(CHUNK_SIZE)
            .reader(reader())
            .processor(processor())
            .writer(writer())
            .build();
}

@Bean
@Profile("master")
public Job processingBatchJob() throws Exception {

    return 
   jobBuilderFactory.get("processingBatchJob").listener(jobListener)
            .start(masterStep())
            .build();
}

@Bean
public TaskExecutor taskExecutor() {
    ThreadPoolTaskExecutor taskExecutor = new ThreadPoolTaskExecutor();
    taskExecutor.setMaxPoolSize(20);
    taskExecutor.setCorePoolSize(20);
    taskExecutor.setQueueCapacity(100);
    taskExecutor.afterPropertiesSet();
    taskExecutor.setThreadNamePrefix("xtrac");
    return taskExecutor;
}    

@Bean
public PartitionHandler partitionHandler(MessagingTemplate 
messagingTemplate) throws Exception
{
    MessageChannelPartitionHandler partitionHandler = new 
     MessageChannelPartitionHandler();
    partitionHandler.setStepName("slaveStep");
    partitionHandler.setGridSize(GRID_SIZE);
    partitionHandler.setMessagingOperations(this.messageTemplate);
    partitionHandler.setPollInterval(5000l);
    partitionHandler.setJobExplorer(this.jobExplorer);
    partitionHandler.afterPropertiesSet();
    return partitionHandler;
}

例如，当您执行 submitPassword 时，您将执行所有逻辑，然后根据结果可以调度另一个操作来更新ui或域部分，以便连接的组件响应这些更改

UI包含有关UI更改的信息，例如您要提交的信息显示进度条还是必须显示对话框。

域部分保存与整个Web应用程序相关的信息，例如登录信息和通知。

如何使用React和Redux从父组件传递新道具

2 个答案: