我研究了多个来源试图解决这个问题,但找不到任何答案。我有一个功能组件 <Dashboard />
这将显示来自 API 的一些信息。
我希望组件首先进入 useEffect,执行 getData 函数,然后在屏幕上显示 {devices}。然而,发生的情况是存储状态被更新,但组件没有更新。 {devices} 变量始终未定义。我认为我不明白如何使用 useSelector 从 reducers/all/dashboard.js 访问我的状态变量。
仪表板/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,
};
}
非常感谢任何帮助。
提前致谢!
最佳答案
react-redux
useSelector
钩子(Hook)正在从 Redux 存储状态对象中选择状态。
如果您的dashboard
reducer 合并到您的根 reducer 中,类似于
const rootReducer = combineReducers({
... other reducers
dashboard,
... other reducers
});
然后应从 state.dashboard.devices
访问设备状态值。
组件的更新:
const devices = useSelector(state => state.dashboard.devices)
关于javascript - 如何使用useSelector访问函数组件中redux的存储状态变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65985091/