Reactjs中功能组件的Redux (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);

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

我的问题是：

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

提前感谢！

编辑：

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

Answer 1

从7.x版本开始，redux就有了功能组件的钩子。

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

Answer 2

正如丹·艾布拉莫夫( Dan )在其疯狂的Egghead.io系列中所提到的，表示组件不应该知道Redux商店，也不应该直接使用它。应该创建一个叫做容器组件的东西，它将通过属性将必要的状态字段+动作回调传递给表示组件。

如果您不熟悉上述概念，我强烈建议您观看Dan的Egghead.io系列。他所描述的模式现在已经有了用于编写React+Redux应用程序的事实上的标准样式指南。

Answer 3

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

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

一个更清晰的想法是只使用Redux附带的提供程序组件将您的头组件转换为容器。容器是一个“侦听”存储所做的任何更改的react组件。您实际上是将头组件包装在一个直接连接到redux存储区的高阶组件中。

这种方式更具有可伸缩性，您可以轻松地创建一个样板文件，该文件可以与任何React/Redux项目一起使用。