时间戳

首页 > 解决方案 > 如何在功能组件内成功调度 redux 后检索数据

reactjs - 如何在功能组件内成功调度 redux 后检索数据

问题描述

基本上，我试图找出最简洁的方法，仅在调度了 redux 操作后才从状态中检索数据。state 中的数据只有在 action 完成后才可用，所以我希望在 state 中的租户数据可用后能够访问该 state 属性。

const dispatch = useDispatch();

const [items, setData] = useState([]);

useEffect(() => {
    setLoading(true);
    initialFetch();
    setLoading(false);
}, []);

const initialFetch = () => {
    // dispatches action and sets the tenant data to the state //
    dispatch(tenantActions.getAllTenants(page, perPage));

    // retrieve data from state //
    const data = store.getState();
    // DATA DOES NOT EXIST IN THE STATE BY THIS POINT //
    setData(data.tenants.items);

    // perform some functions with retrieved data //
    const cols = tableHelpers.createColumns(items);
    setColumns(cols);
}

我的 redux 记录器将请求显示为：

tenants: {loading: true}

成功的动作响应为：

tenants:
   items: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

所以减速器正在工作并正确发送回数据。

我曾尝试使用订阅，但它会导致内存泄漏。UseSelector 在函数中是不可能的，所以这也是不可能的。任何关于最佳处理方式的建议都会非常有帮助。

标签： reactjsreduxreact-redux

解决方案

推荐阅读