React / Redux-ReactコンポーネントのReduxストアから値を表示するにはどうすればよいですか？

debugcn 投稿 Dev

ユージンゴールドバーグ

React / Reduxを始めたばかりです。

Firebaseで認証を実装し、ログインしたユーザーをReduxストアに保存できるようにしました。

App.js：

import React, { useEffect } from "react";
import { Switch, Route } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

import Login from "./pages/auth/Login";
import Register from "./pages/auth/Register";
import Home from "./pages/Home";
import Header from "./components/nav/Header";
import RegisterComplete from "./pages/auth/RegisterComplete";

import { auth } from "./firebase";
import { useDispatch } from "react-redux";

const App = () => {
  const dispatch = useDispatch();

  // to check firebase auth state
  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(async (user) => {
      if (user) {
        const idTokenResult = await user.getIdTokenResult();
        console.log("user", user);
        dispatch({
          type: "LOGGED_IN_USER",
          payload: {
            email: user.email,
            token: idTokenResult.token,
          },
        });
      }
    });
    // cleanup
    return () => unsubscribe();
  }, [dispatch]);

  return (
    <>
      <Header />
      <ToastContainer />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/register" component={Register} />
        <Route exact path="/register/complete" component={RegisterComplete} />
      </Switch>
    </>
  );
};

export default App;

私のReduxストアはIndex.jsで定義されています：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter} from "react-router-dom";
import 'antd/dist/antd.css';
import { createStore } from "redux";
import { Provider } from "react-redux";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "./reducers";

const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

ヘッダーコンポーネントに、「store.user.email」のようにReduxストアに保存されているログインユーザーの電子メールを表示したいと思います。これは、ブラウザーのReduxコンソールタブではっきりと確認できます。

Header.jsコンポーネントで「store」を取得する適切な方法は何ですか？

ニコラスタワー

機能コンポーネントを使用しているので、次を使用できますuseSelector。

import { useSelector } from 'react-redux';

const Header = () => {
  const email = useSelector(store => store.user.email);

   // do whatever with the email
};

すべてのタイプのコンポーネントで使用できるもう1つのオプションはconnect、次のmapStateToProps関数で使用することです。

import { connect } from 'react-redux';

const Header = ({ email }) => {
  // do whatever with the email prop
};

const mapStateToProps = (store) => ({
  email: store.user.email
});

export default connect(mapStateToProps)(Header);

詳細については、useSelectorに関するドキュメントをご覧ください：https：//react-redux.js.org/api/hooks#useselector

そして、ここに接続に関するドキュメントがあります：https：//react-redux.js.org/api/connect

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]