Redux存储发生更改时,组件不会重新渲染

时间:2019-10-18 09:13:45

标签: reactjs redux react-hooks redux-saga

我在将Redux saga与react挂钩一起使用时遇到问题。明确指出useSelector()将订阅Redux存储,并在分派操作时运行选择器。

这是我要更新的组件:

import React from 'react';
import { useSelector} from "react-redux";

const InfoPage = () => {
    const summoner = useSelector(state => state.summoner);
    const loading = useSelector(state => state.loading);
    console.log(loading,summoner) {*/Both undefined and only gets called once*/}
    if(!summoner){
       return <div>Loading...</div>
    }

    return( 
        <div>
           {summoner.name}
        </div>
    )
}

export default InfoPage;

当我分派动作以获取“召唤者”时,该组件通过history.push('/ infopage')被调用,当成功设法获取召唤者时,该组件再次分派另一个动作。如果我理解此权限,这应该重新呈现我的InfoPage。

我的redux存储在获取后具有值,但是InfoPage不会重新呈现,这是最后一个状态:

Picture of my redux store

这也是我的减速器

reducer

1 个答案:

答案 0 :(得分:0)

我发现了问题...我忘记了我的saga reducer在导出时被称为“ saga”。因此,要解决此问题,我必须更改:

 const summoner = useSelector(state => state.summoner);

 const summoner = useSelector(state => state.saga.summoner);