React/Redux - 如何在 React 组件中显示来自 Redux 存储的值？答案

【问题标题】：React/Redux - How to display a value from Redux store in React component?React/Redux - 如何在 React 组件中显示来自 Redux 存储的值？
【发布时间】：2020-12-28 15:51:18
【问题描述】：

刚刚开始使用 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')
);

在我的 Header 组件中，我想显示登录用户的电子邮件，该电子邮件存储在 Redux 存储中，例如“store.user.email”，我可以在浏览器的 Redux 控制台选项卡中清楚地看到它。

在我的 Header.js 组件中获取“存储”的正确方法是什么？

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

由于使用的是函数式组件，所以可以使用useSelector：

import { useSelector } from 'react-redux';

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

   // do whatever with the email
};

对所有类型的组件都可用的另一个选项是将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

【讨论】：

【解决方案2】：

你也可以试试这个。将此部分添加到 Header 组件中

 componentDidMount() { 
        store.subscribe(() => { 
            this.setState({})
        })
    }

然后将以下代码添加到 index.jsx 中

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

我也是 React 新手，所以我对它的了解有限。

【讨论】：