反応Reduxのプロップが定義されていません

レモンのニュース：

初心者の質問。私は小道具としてストアからコンポーネントへのユーザーオブジェクトを渡したいが、コンポーネントは、それ（未定義）取得していません。私は、サードパーティのサービス認証サービスからユーザーオブジェクトを取得する（firebaseグーグル）

ミドルウェアは、実際に型SET_CURRENT_USERのアクションが行われることをコンソールにログアウトし、次の状態は確かにログインサービス（NOT UNDEFINED）から返されたオブジェクトに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にユーザーオブジェクトを格納するストアを設定しようとしています

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')
);

ルート減速

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;

ブライアン・トンプソン：

あなたは、両方やっているという名前とデフォルトの輸出をNavbar。デフォルトのエクスポートはで包まれますconnect追加HOC currentUserその小道具に。名前の輸出はしていません。

あなたはそれがこのように名付けインポートしますimport { Navbar } from。代わりに、デフォルトのエクスポートを使用しますimport Navbar from。

それから私は、将来の混乱を避けるために、名前のエクスポートを削除することをお勧め。

反応Reduxのプロップが定義されていません

おすすめ