如何使用 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(() =&gt; console.log("devices =&gt; ",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值返回一个周期后的值

Redux,使用 useSelector 访问 API 对象内的数据

带有条件语句的 Redux useSelector

是否可以为 useSelector 创建一个可重用的函数?

我应该使用 useselector/useDispatch 而不是 mapStateToProps

使用 React Styled Components,如何根据通过 useSelector 收集的状态声明颜色?