javascript - 在Redux存储中更改异步状态后重新渲染React功能组件(Re-rendering react functional component after async state change in redux store)

Question

I have functional component in react which is routed using the route say, baseURL/recipe/:id

(我在react中具有功能组件，该组件使用路由说， baseURL/recipe/:id)

Now I get this id from the URL by using useEffect and then once I have the id I make a REST call that changes the state(store), here is my useEffect function:

(现在，我通过使用useEffect从URL获取此ID，然后一旦获得ID，就进行REST调用以更改状态（存储），这是我的useEffect函数：)

useEffect(() => {
        let id = props.match.params.id; // get ID from the URL
        props.getRecipeSummary(id);    // make async call
    },[props.match.params.id]);

I can see that the getRecipeSummary() call changes my state(redux) which is mapped to props.recipeSummary

(我可以看到getRecipeSummary（）调用更改了映射到props.recipeSummary的状态（redux）。)

But I am not sure how I can re-render the component at this point so I can see the fetched result(recipe) on the screen.

(但是我不确定此时如何重新渲染该组件，以便可以在屏幕上看到提取的结果（配方）。)

Things I tried doing :

(我尝试做的事情：)

useEffect(() => {
    let id = props.match.params.id;
    props.getRecipeSummary(id)
},[props.match.params.id,props.recipeSummary]);

Also not sure if this is a good design as I am just getting my feet wet with react an redux,

(同样也不确定这是否是一个好的设计，因为我只是想对redux做出反应，)

Below is full code for reference:

(以下是完整的代码供参考：)

const Recipe = (props) => {
    useEffect(() => {
        let id = props.match.params.id;
        props.getRecipeSummary(id)
    },[props.match.params.id,props.recipeSummary]);



    return(
        <div>
            Recipe : {props.match.params.id}
            <div className="ui grid">
                <div className="row">
                    <div className="eight wide column">
                        {renderSummary(props.recipeSummary)}
                    </div>
                    <div className="eigth wide column">
                        Image
                    </div>
                </div>
                <div className='row'>
                    <div className="sixteen wide column">
                        This are ingredients.
                    </div>
                </div>
                <div className='row'>
                    <div className="sixteen wide column">
                        This are the directions.
                    </div>
                </div>
            </div>
        </div>
    )
};

const renderSummary = (recipeSummary) =>{
    if(recipeSummary){
        return recipeSummary.summary;
    }
}

export const mapStateToProps = (state)=>{
    return{
        recipeSummary: state.recipeSummary,
    }
}

export default connect(mapStateToProps,{getRecipeSummary}) (Recipe);

  ask by Snedden27 translate from so

Answer 1

等待大神答复