更新 Redux 状态，然后在同一实例中获取更新后的状态

Posted 2023-02-22

【中文标题】更新 Redux 状态，然后在同一实例中获取更新后的状态

【英文标题】：Update Redux State & Then Get The Updated State In Same Instance

【发布时间】：2016-08-26 23:16:57

【问题描述】：

情景：

我有一个带有子图像的响应式div 容器（CSS - 宽度：33%）。不希望用户向下滚动，我想找出div 的绝对尺寸，以便我可以计算可以容纳的图像数量（具有固定宽度和高度）。然后只渲染图像可以放在屏幕上。

我正在为这个应用程序使用 React 和 Redux。这是我想到的逻辑，它不起作用。

_ Smart Component (subscribed to the Store)
|___ `div` container (presentational component)
|______ images (presentational components)

我渲染了'presentational'组件，然后在componentDidMount中，我调度了一个函数来找出div容器的宽度和高度，并用'图像容量'值更新Redux状态（有多少图像可以存储在div 容器中）。

在上述函数之后，我仍然在 componentDidMount 中，立即调度另一个函数，该函数应该从存储中获取 UPDATED 值（图像容量）并使用图像数据更新存储。

这个想法是，当商店更新时，智能组件将重新渲染演示组件（div 和图像），因此会发生第二轮重新渲染以显示图像。

不幸的是，这是有缺陷的。传递给演示组件的道具是“更新前”存储值（0），因此当我运行调度第二个函数以使用图像更新存储时，它在其道具中的“图像容量”值仍然为零（ 0).

我想知道在这里实现什么正确的逻辑？

如果代码更有意义，这里是演示组件代码：

const PreviewTemParent = React.createClass(
    componentDidMount : function() 
        let elePreviewParent = ReactDOM.findDOMNode( this.refs.previewParent );
        previewTemParentAttr.width = elePreviewParent.clientWidth;
        previewTemParentAttr.height = elePreviewParent.clientHeight;
        this.props.findImgCapacity();
        this.temImgToShow( "body" );
    ,
    temImgToShow : function( templateType ) 
        let pagination = this.props.previewTemState.get( "pagination" );
        let imgCapacity = this.props.previewTemState.get( "imgCapacity" );
        console.log( "%c     In `PreviewTemParent`, pag, imgCap & props are...", "color : gold", pagination, "; ", imgCapacity, "; ", this.props );
        this.props.temImgToShow( templateType, pagination, imgCapacity );
    ,

    render : function() 
        return(
            <div
             className = "previewParent"
             ref = "previewParent">
                <div className = "previewContainer">
                     this.props.previewTemState.get( "temImg" ).map( ( imgObj ) => 
                        <PreviewTemImgContainer data =  imgObj  />;
                     ) 
                </div>
            </div>
        );
    
);

编辑：

应@pierrepinard_2 的要求，我发布了详细的代码，希望能解释我的尝试。

我尝试了一些方法，包括将“智能组件”添加到 <PreviewTemParent> 的父级，然后让父级计算尺寸。但是，在这种情况下，props 仍然没有更新，这是可以理解的，因为 componentDidMount 是在 <PreviewTemParent> 挂载之后运行的。

这是我根据@pierrepinard_2 关于使用componentWillReceiveProps 的建议尝试的解决方案，似乎没有被调用。

C_PreviewTemParent CONTAINER（智能组件）

import  connect  from "react-redux";
import  temImgToDisplayInContainer  from "../modcon/Actions.js";
import PreviewTemParent from "../component/temContainer/PreviewTemParent.jsx";

const mapStateToProps = ( previewTemImgState ) => 
    return(
        previewTemState : previewTemImgState
    );
;
const mapDispatchToProps = ( dispatch ) => 
    return(
        temImgToDisplayInContainer : ( templateType, activePage ) => 
            dispatch( temImgToDisplayInContainer( templateType, activePage ) );
        
    );
;

export const C_PreviewTemParent = connect( mapStateToProps, mapDispatchToProps )( PreviewTemParent );

预览父组件

const PreviewTemParent = React.createClass(
    componentDidMount : function() 
        this.props.temImgToDisplayInContainer( "body" );
    ,
    componentWillReceiveProps : function( nextProps ) 
        console.log( "%c   componentWillReceiveProps is...", "color: green", nextProps );
    ,
    render : function() 
        return(
            <div className = "previewParent">
                <div className = "previewContainer">
                     this.props.previewTemState.get( "temImg" ).map( ( imgObj ) => 
                        <PreviewTemImgContainer data =  imgObj  />;
                     ) 
                </div>
            </div>
        );
    
);

动作创作者 请原谅冗长的代码：！

export const temImgToDisplayInContainer = ( templateType, activePage ) => 
    // temImgCapacity finds out the number of images that can 
    // fit in the container based on the container's dynamic Width & Height.
    // in order to make the func reusable, activePage is an optional parameter
    // hence the `if`
    let temImgCapacity;
    if( activePage )
        temImgCapacity = findImgCapacityInPreviewTem( false );
     else 
        temImgCapacity = findImgCapacityInPreviewTem( true );
    
    // `previewTemImgData` is a store of static data of all the images.
    // during development, this is being used instead of ajax calls etc
    // `temImgData` stores the data only for the 'templates' we are interested in
    let temImgData = previewTemImgData.get( templateType );
    let counter = 1;
    // `noOfTemplate` is how many images we will render
    let noOfTemplate = temImgCapacity.get( "imgCapacity" );
    let currentPage = activePage || temImgCapacity.get( "activePage" );
    // `maxCounter` is for pagination, which is the last template to store
    let maxCounter = currentPage * noOfTemplate;
    let temStartFrom = (( currentPage * noOfTemplate ) - noOfTemplate );    // what template start number.
    // get the tempales we are only interested in
    let filteredTemImgData = temImgData.filter( ( templateObj ) => 
        if (( counter <= maxCounter ) && ( counter >= temStartFrom )) 
            counter++;
            return( templateObj );
        
     );
    // merging the data from above first line 'temImgCapacity' & the filtered
    // temImgData
    let payloadData = filteredTemImgData.merge(( temImgCapacity ));
    return(
        type : CURRENT_TEM_IMG,
        payload : payloadData
    );
;

最后是减速机：

const previewTemImgState = ( state = initialPreviewTemState, action ) => 
    switch( action.type ) 
    case( FIND_IMG_CAPACITY_IN_PREVIEW_TEM ) :
        return(
            state.set( "imgCapacity", action.payload.imgCapacity )
        );
    case( RENDER_TEM_IMG ) :
        console.log( action.payload );
        var newState = state.set( "temImg", action.payload.temImg );
        console.log( "%c   previewTemImgState is...", "color : red", state.get( "temImg" ), " ; ", newState.get( "temImg" ) );
        return(
            state.set( "temImg", action.payload )
        );
    default :
        return state;
    
;

【问题讨论】：

一种方法是将调用移动到temImgToShow 到componentWillReceiveProps 方法。您应该首先检查 imgCapacity 属性是否已更改。

@HonzaHaering 我一直在考虑并尝试实现这一点，但是，它似乎并没有太大的区别。我认为问题在于组件实例不知道状态发生了变化。

难道不能只从 componentDidMount() 触发一个动作吗？使用以下参数：宽度和高度（用于计算图像容量）、模板类型、分页。那么你只会得到一个具有所需状态的 UI 更新。

@pierrepinard_2 问题是，首先我需要找到容器的尺寸（W 和 H），然后使用这些尺寸以正确数量的图像更新状态。所以，事件的顺序需要是：--1--渲染图像容器组件--2--找到容器的尺寸--3-使用要渲染的图像更新状态--4--渲染图像容器及其子组件（图像）

对不起，我不明白为什么你必须先用图像容量更新状态，然后用要显示的图像再次更新它。你不能只通过一个周期来执行这两个状态更新吗？

【参考方案1】：

问题是当你在temImgToShow()中调用this.props.previewTemState时，状态对象引用仍然和componentDidMount()执行开始时一样，在this.props.findImgCapacity()被调用之前。

一种选择是仅从componentDidMount() 触发一个合成操作，使用以下参数：宽度和高度（用于计算图像容量）、模板类型、分页。那么您只会获得一个具有所需状态的 UI 更新。

如果你真的不能只触发一个动作来执行所有工作，那么你可以触发 componentWillReceiveProps() 中的第二个动作，正如 Honza Haering 在 cmets 中建议的那样：

componentDidMount: function() 
    let elePreviewParent = ReactDOM.findDOMNode( this.refs.previewParent );
    previewTemParentAttr.width = elePreviewParent.clientWidth;
    previewTemParentAttr.height = elePreviewParent.clientHeight;
    this.props.findImgCapacity();
,

componentWillReceiveProps: function(nextProps) 
    let newImgCapacity = nextProps.previewTemState.get( "imgCapacity" );
    let oldImgCapacity = this.props.previewTemState.get( "imgCapacity" );
    if (newImgCapacity !== oldImgCapacity && newImgCapacity > 0) 
        let pagination = nextProps.previewTemState.get( "pagination" );
        nextProps.temImgToShow("body", pagination, newImgCapacity);
    
,

或者，如果您使用 redux-thunk 中间件，您可以使用带有承诺的异步操作创建器来正确链接操作。如果你给我们你的动作代码，我可以告诉你怎么做。

【讨论】：

非常感谢 pierrepinard_2。将两者分开的要点有两点，首先我不想在每次需要更新图像容器时都读取 DOM（它经常会更新），其次要使其模块化，以便我可以在其他地方使用它。现在，我试图让componentWillReceiveProps 工作，但没有取得多大成功。问题是这样的：当我们更新 componentDidMount 中的 Redux 状态时，我会认为 image-container 顶部的 smart-container-component 会要求重新渲染 image-container。然而，这似乎并没有发生......（待定）

仅仅在componentWillReceiveProps 内执行console.log(nextProps) 不会被调用。似乎这里没有调用第二次重新渲染。

那么我应该会看到更多你的代码（动作、reducers、容器等）。能给个链接吗？

我已更新问题，请从“编辑”下方阅读。感谢您为我调查此问题@pierrepinard_2

抱歉，我的 reducer 和 action.type 有错误。现在我得到了 console.log 响应！如果我没有通过使用componentWillReceiveProps 获得更新的结果，我将关闭这个问题并设置另一个问题。再次感谢您竭尽全力帮助我和社区:)