Javascript React Redux prop未定义

初学者问题。 我想将一个用户对象作为道具从存储区传递到组件，但组件没有得到它（未定义）。我从第三方服务认证服务（google firebase）获取用户对象

中间件实际上在控制台中注销，类型为SET_CURRENT_USER的操作发生，并且下一个状态确实将有一个USER.currentUser设置为从登录服务返回的对象（未定义）

但是，组件不会重新渲染，并且似乎不会将对象作为道具接收

未定义道具的零部件

import React from 'react';
import { connect } from 'react-redux';
import { auth } from "../../firebase/firebase.utils";

export const Navbar = ({ currentUser }) => {
    return (
        /* A LOT OF JSX CODE. currentUser IS UNDEFINED */
    );
};

const mapStateToProps = state => ({
    currentUser: state.user.currentUser
});

export default connect(mapStateToProps)(Navbar);

应用程序组件，将上述组件作为子组件。此外，我正在尝试将存储设置为在componentDidMount（）中包含用户对象

用户减速器

const INITIAL_STATE = {
    currentUser: null
};

const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'SET_CURRENT_USER':
            return {
                ...state,
                currentUser: action.payload
            };
        default:
            return state;
    }
};

export default userReducer;

用户操作

export const setCurrentUser = user => ({
    type: 'SET_CURRENT_USER',
    payload: user
});

商店

import { createStore, applyMiddleware } from "redux";
import logger from 'redux-logger';

import rootReducer from './root-reducer';

const middlewares = [logger];

const store = createStore(rootReducer, applyMiddleware(...middlewares));

export default store;

您正在为

Navbar

执行命名和默认导出。默认导出由

connect

HOC包装，该HOC将

currentUser

添加到其道具中。指定的导出不存在

您可以这样导入它：

从

导入{Navbar}。而是使用默认的导出：

从

导入导航栏

---

然后我建议删除命名的导出，以避免将来的混淆。

但是，拥有命名的导出对于测试来说很有价值（并且允许断开连接的使用，这可能有价值）。显然，它不应该被称为同一件事：）@DaveNewton是的，这是真的。我认为，如果您想同时支持连接和断开连接，为了清晰起见，应该交换导入。将组件本身设为默认导出，然后将连接的导出命名为

ConnectedNavbar

@brianthonpson，这实际上取决于主要用例。这个难题是一个不幸的副作用，人们认为连接应该发生在组件文件本身（生产者）而不是组件实际使用的地方（消费者）。一般来说，我主张只导出未连接的组件，并在其他地方执行

connect

s。实际上，我100%同意。我更愿意让像这样的组件完全不知道redux，但这最终是一种偏好。在我的评论中，我只是建议，如果你想保留这两种出口，那么可以更清楚地说出哪一种做了额外的事情。

const INITIAL_STATE = {
    currentUser: null
};

const userReducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case 'SET_CURRENT_USER':
            return {
                ...state,
                currentUser: action.payload
            };
        default:
            return state;
    }
};

export default userReducer;

export const setCurrentUser = user => ({
    type: 'SET_CURRENT_USER',
    payload: user
});

import { createStore, applyMiddleware } from "redux";
import logger from 'redux-logger';

import rootReducer from './root-reducer';

const middlewares = [logger];

const store = createStore(rootReducer, applyMiddleware(...middlewares));

export default store;