如何使用 useSelector 在功能组件中访问 redux 的 store 状态变量?
Posted
技术标签:
【中文标题】如何使用 useSelector 在功能组件中访问 redux 的 store 状态变量?【英文标题】:How to access redux's store state variable in a functional component using useSelector? 【发布时间】:2021-05-05 04:19:32 【问题描述】:我已经查看了多个资源来尝试解决此问题,但找不到任何答案。我有一个功能组件<Dashboard />
,它将显示来自 API 的一些信息。
我希望组件首先进入 useEffect,执行 getData 函数,然后在屏幕上显示 devices。但是,发生的情况是存储状态已更新,但组件未更新。 devices 变量始终未定义。我想我不明白如何使用 useSelector 从 reducers/all/dashboard.js 访问我的状态变量。
dashboard/index.js
import React, useEffect from "react";
import useSelector, useDispatch from "react-redux";
import api from "../../services/api";
import * as DashboardActions from "../../store/actions/dashboard";
const Dashboard = (props) =>
const dispatch = useDispatch();
const devices = useSelector(state => state.device)
useEffect(() =>
async function getData()
const pathname = "/dashboard";
await api
.get(pathname)
.then((res) =>
dispatch(DashboardActions.setData(res.data));
)
.catch((res) =>
console.log(res.response.data);
);
getData();
console.log("devices ue ", devices);
, [dispatch]);
return (
<div>
<h1>Dashboard</h1>
<span>devices</span>
</div>
);
;
export default Dashboard;
reducers/all/dashboard.js
const INITIAL_STATE =
devices: [],
;
function dashboard(state = INITIAL_STATE, action)
console.log("Action ", action)
if ("DASHBOARD_SET_DATA" === action.type)
const data = action.data;
console.log("Data: ", data.devices)
state = ...state, devices: data.devices ;
console.log("State ", state)
return state;
export default dashboard;
actions/dashboard.js
export function setData(data)
return
type: "DASHBOARD_SET_DATA",
data,
;
如果有任何帮助,我将不胜感激。
提前致谢!
【问题讨论】:
当您使用console.log(devices)
时,devices
的外观如何?
React 挂钩回调是 100% 同步的,您只是在调用挂钩回调时记录 devices
值,而不是 asynchronous getData
函数可能是什么正在做。使用单独的useEffect
记录对devices
值的任何更新。另外,你确定你访问的是正确的状态片吗? IE。是state.device
,是组合减速器中使用的名称吗?似乎如果您正确访问状态,那么您至少会看到初始状态 devices: []
。
@BoussadjraBrahim 未定义
试试useEffect(() => console.log("devices => ",devices);,[devices])
告诉我
@DrewReese 哦!我认为您评论的第二部分绝对是问题的一部分。我以为你直接访问了存储在 reducer 中的属性名称。我认为如果我将其更改为“仪表板”,它应该可以工作。
【参考方案1】:
react-redux
useSelector
钩子正在从你的 redux 存储状态对象中选择状态。
如果您的 dashboard
减速器被合并到您的根减速器中,类似于
const rootReducer = combineReducers(
... other reducers
dashboard,
... other reducers
);
那么应该从state.dashboard.devices
访问设备状态值。
您的组件的更新:
const devices = useSelector(state => state.dashboard.devices)
【讨论】:
以上是关于如何使用 useSelector 在功能组件中访问 redux 的 store 状态变量?的主要内容,如果未能解决你的问题,请参考以下文章
Redux,使用 useSelector 访问 API 对象内的数据