Реактивная поддержка Redux не определена

Question

Вопрос новичка. Я хочу передать пользовательский объект компоненту из хранилища в качестве реквизита, но компонент не получает его (не определено). Я получаю объект пользователя из сторонней службы проверки подлинности службы (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);

Компонент App, у которого вышеуказанный компонент является дочерним. Кроме того, я пытаюсь настроить хранилище для хранения объекта пользователя в componentDidMount ()

import React from 'react';
import Homepage from "./pages/homepage";
import { Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';

import Login from "./pages/login";
import Register from "./pages/register";
import { Navbar } from "./components/navbar/navbar";

import { auth } from "./firebase/firebase.utils";
import { setCurrentUser } from "./redux/user/user.actions";

class App extends React.Component {
    unsubscribeFromAuth = null;

    componentDidMount() {
        this.unsubscribeFromAuth = auth.onAuthStateChanged(async userAuth => {
            if(userAuth) {
                (async () => {
                    const rawResponse = await fetch(/* JUST AN ASYNC FUNCTION TO POST TO BACKEND*/);
                })();
            }
            this.props.setCurrentUser(userAuth); /*HERE IM TRYING TO SET THE STORE*/
        })
    }

    componentWillUnmount() {
        this.unsubscribeFromAuth();
    }

    render() {
        return (
            <div>
                <Navbar /> /* THE COMPONENT WHICH SHOULD GET THE USER OBJECT AS PROP */
                <Switch>
                    <Route exact={true} path={'/register'} component={Register} />
                    <Route exact={true} path={'/login'} component={Login} />
                    <Route path={'/'} component={Homepage} />
                </Switch>
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => ({
    setCurrentUser: user => dispatch(setCurrentUser(user))
});

export default connect(null, mapDispatchToProps)(App);

Индексный компонент

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import { Provider } from 'react-redux';

import store from "./redux/store";

ReactDOM.render(
    <Provider store={store} > /* HERE IS STORE PROVIDED FROM IMPORT*/
        <BrowserRouter>
            <App/>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);

Root редуктор

import { combineReducers } from "redux";

export default combineReducers({
    user: userReducer
});

Пользовательский редуктор

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;

Answer 1

Вы выполняете экспорт с именем и по умолчанию для Navbar. Экспорт по умолчанию оборачивается connect HO C, который добавляет currentUser к его реквизиту. Именованный экспорт не выполняется.

Вы импортируете его именованным так: import { Navbar } from. Вместо этого используйте экспорт по умолчанию: import Navbar from.

Тогда я бы предложил удалить именованный экспорт, чтобы избежать путаницы в будущем.