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

Posted 2023-02-22

技术标签:

【中文标题】Reactjs (web) 中功能组件上的 Redux【英文标题】：Redux on functional components in Reactjs (web) 【发布时间】：2016-11-13 12:13:57 【问题描述】：

我之所以写这个问题，是因为我想请你帮助我如何在我的功能组件上使用 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

【问题讨论】：

我猜你正在使用 react-redux 绑定到 connect redux 到你的反应应用程序？ @Scarysize 我将 url 添加到我正在使用的入门工具包中。 【参考方案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')
);

【讨论】：

在 redux 中使用 hooks 有一些特定的缺点/注意事项。请务必先阅读：react-redux.js.org/next/api/hooks#usage-warnings【参考方案2】：

正如 Dan Abramov 在他著名的 Egghead.io 系列中提到的那样，展示组件不应该知道 Redux 存储，也不应该直接使用它。您should create something called container component，它将通过属性将必要的状态字段 + 操作回调传递给您的演示组件。

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

【讨论】：

【参考方案3】：

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

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

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

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

【讨论】：

【参考方案4】：

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

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

对于还原：