无法从 React 应用程序中的 Redux 存储读取数据答案

【问题标题】：Unable to read data from Redux store in the React app无法从 React 应用程序中的 Redux 存储读取数据
【发布时间】：2020-10-15 15:23:55
【问题描述】：

这是我使用 useSelector 的 React 代码，我试图从商店中读取一个名为 currentUser 的属性，但它不起作用：-

  import { useSelector } from 'react-redux';
  const currentUsr = useSelector(state => {
    console.log('state:', state);
    //state.get('currentUser');
    state.currentUser;
  });
  console.log('currentUsr', currentUsr);

如果我只在控制台打印状态，那么它会像这样：-

Map {size: 7, _root: ArrayMapNode, __ownerID: undefined, __hash: undefined, __altered: false}
size: 7
__altered: false
__hash: undefined
__ownerID: undefined
_root: ArrayMapNode {ownerID: OwnerID, entries: Array(7)}
__proto__: KeyedCollection

我可以使用 Redux 开发工具插件查看 Redux 存储中的数据（参考屏幕截图）：-

它总是以未定义的形式出现。

这是我的用户信息缩减器：-

import Immutable from 'immutable';
import * as actions from '../actions/actionTypes';

const initialState = Immutable.Map({});

export const setUserInfo = (state = initialState, action) => {
  switch (action.type) {
    case actions.ADD_USER:
      return state.merge({
        uid: action.uid,
        permissions: action.permissions,
        locale: action.locale,
      });
    default:
      return state;
  }
};

我尝试了很多调试，但仍然无法从 Redux 存储中读取 currentUser。我非常感谢您对此的帮助，因为我完全被它阻止了。谢谢

【问题讨论】：

你没有返回state.currentUser。你试过return state.currentUser;吗？
对不起，它不工作。我过去曾与 Redux 合作过，但从未像这样被阻止。如果您看到 redux 开发工具的屏幕截图，那么使用 state.currentUser 从中获取数据非常容易。不知道在哪里检查。仅供参考，从 './userInfoReducer' 导入 { setUserInfo as currentUser }; const appReducer = combineReducers({ authReducer, currentUser })

标签： reactjs redux

【解决方案1】：

当你使用 useSelector() 或 useDispatch() 时，它应该分别返回 state 和 dispatch action。在上面的代码中，useSelector() 中缺少返回语句。

你可以用任何一种方式写：

const currentUsr = useSelector(state => {
    console.log('state:', state);
    //state.get('currentUser');
    return state.currentUser;
  });

或

const currentUsr = useSelector(state => state.currentUser);

更新：尝试像这样改变你的状态：

 case actions.ADD_USER: {
    let newState = {...state, {
        uid: action.uid,
        permissions: action.permissions,
        locale: action.locale,
      }
  }

  return state.merge(newState);
}

【讨论】：

对不起，它不工作。我尝试了这两个选项，但没有工作。我过去曾与 Redux 合作过，但从未像这样被阻止。如果您看到 redux 开发工具的屏幕截图，那么使用 state.currentUser 从中获取数据非常容易。不知道在哪里检查。仅供参考，从 './userInfoReducer' 导入 { setUserInfo as currentUser }; const appReducer = combineReducers({ authReducer, currentUser });
最后，我找到了解决方案...问题是我没有使用 Immutable JS Map 正确读取 redux。由于 Immutable JS 以 map 的形式存储 redux 数据，所以我应该在其中发送密钥。这段代码对我有用：- const currentUsr = useSelector(state => state.get('currentUser')); console.log('currentUsr uid', currentUsr.get('uid'));

【解决方案2】：

我没有正确使用 Immutable JS 从 Redux 读取数据。在 Immutable 中，数据以 Map 的形式存储，因此我应该在其 get() 中将密钥作为“uid”发送。

这段代码对我有用：-

const currentUsr = useSelector(state => state.get('currentUser'));
console.log('currentUsr uid', currentUsr.get('uid'));

【讨论】：