Redux 在 Reactjs (web) 中的功能组件

Question

我写这个问题是因为我想请你帮忙如何在我的功能组件上使用 redux。我查看了 React 组件的其他示例，但我无法理解如何在功能组件中获取“存储”值。

我的想法是用我的

store.getState()

在我的功能组件中检查状态并与 UI 交互，但我无法实现。

请问有什么帮助吗？

例如，一个功能组件：

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Header.css';
import { Navbar, Nav } from 'react-bootstrap';
import HeaderMenu from '../HeaderMenu';
import cx from 'classnames';

function Header() {
  return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}>
      <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav>
      <HeaderMenu />
    </Navbar>
  );
}

export default withStyles(s)(Header);

如何在我的 Header 组件中使用“store”对象？它适用于我的 App 组件，只是我不知道如何在我的组件中使用它。

我的问题是：

• 我应该使用操作来检索状态吗？
• 我应该将商店对象组件传递给组件属性吗？

提前致谢！

编辑 ：

我正在使用https://github.com/kriasoft/react-starter-kit 和 redux 分支https://github.com/kriasoft/react-starter-kit/tree/feature/redux

Answer 1

正如 Dan Abramov 在他疯狂著名的 Egghead.io 系列中提到的那样，展示组件不应该知道 Redux 存储并且不应该直接使用它。您应该创建一个名为 container component 的东西，它将通过属性将必要的状态字段 + 动作回调传递给您的展示组件。

如果您不熟悉上述概念，我强烈建议您观看 Dan Abramov 的 Egghead.io 系列。他所描述的模式是当今编写 React+Redux 应用程序的事实上的标准风格指南。

Answer 2

从 7.x 版本开始，react-redux 现在具有功能组件的钩子。

头文件.jsx

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Header.css';
import { Navbar, Nav } from 'react-bootstrap';
import HeaderMenu from '../HeaderMenu';
import cx from 'classnames';
import { useSelector } from 'react-redux'

function Header() {
  const store = useSelector(store => store)
  return (
    <Navbar fluid fixedTop id="Header" className={s.navContainer}>
      <Nav block className={cx(s.HeaderTitle, s.hideOnSmall)}>Project title</Nav>
      <HeaderMenu />
    </Navbar>
  );
}

export default withStyles(s)(Header);

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider } from 'react-redux'
import store from './store'

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