Reactjs（web）中功能组件的Redux

Question

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

我的想法是用我的

百货商店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);

如何在标题组件中使用“存储”对象？它在我的应用程序组件上工作，只是我不知道如何在我的组件中使用它。

我的问题是：

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

提前谢谢！

编辑：

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

Answer 1

如果您想在功能组件上获得Redux状态，您必须手动连接组件和Redux，这非常繁琐。您必须访问React组件中的reducer变量，这意味着在其他配置中将reducer导入组件文件。

这会干扰您通常会获得的其他好处，例如动作创建者、通过中间件自动调度动作等等。

一个更简洁的想法是只使用React-Redux附带的提供者组件将头部组件转换为容器。容器是一个react组件，它“侦听”对存储所做的任何更改。实际上，您将头组件包装在一个直接连接到redux存储的高阶组件中。

这种方式更具扩展性，您可以轻松地创建一个样板文件，可用于任何React/Redux项目。

Answer 2

正如Dan Abramov在他著名的Egghead.io系列中提到的，表示组件不应该知道Redux商店，也不应该直接使用它。您应该创建一个叫做容器组件的东西，它将通过属性向您的表示组件传递必要的状态字段操作回调。

如果以上概念你不熟悉，我强烈建议你看丹·阿布拉莫夫的gghead.io系列。他所描述的模式现在有编写React Redux应用程序的实际标准风格指南。

Answer 3

从第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);

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