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

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 组件中使用“存储”对象？它适用于我的 App 组件，只是我不知道如何在我的组件中使用它。

我的问题是：

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

提前致谢！

编辑：

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

Answer 1

从 7.x 版本开始，react-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 Abramov 在他著名的 Egghead.io 系列中提到的那样，展示组件不应该知道 Redux 存储，也不应该直接使用它。您should create something called container component，它将通过属性将必要的状态字段 + 操作回调传递给您的演示组件。

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

Answer 3

如果你想在一个函数式组件上获取 Redux 状态，要么必须手动连接组件和 Redux，这非常繁琐。您必须访问 React 组件中的 reducer 变量，这意味着将 reducer 导入到组件文件以及其他配置中。

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

一个更简洁的想法是只使用 React-Redux 附带的 Provider 组件将您的 Header 组件变成一个容器。 Container 是一个反应组件，它“监听”对存储所做的任何更改。您实际上是将 Header 组件包装在一个直接连接到 redux 存储的高阶组件中。

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

Answer 4

尝试了解样板项目包含的各个模块/组件，然后再使用它。如果您不熟悉 react（及其补充库），我建议您从这里开始：

• https://github.com/petehunt/react-howto

对于还原：

• http://redux.js.org/

这些都是很好的资源，可以阐明 stackoverflow 上大多数与 react 相关的问题。

Answer 5

您可以使用react-redux library，并且使用connect 您将访问您的store 数据作为组件道具 - 它既简单又高效。