npm 包 @redux-orchestrate/react-redux 使用教程

阅读时长 5 分钟读完

简介

@redux-orchestrate/react-redux 是一个 React-Redux 库,他可以帮助我们更好的集成 React 与 Redux。

安装

要使用 @redux-orchestrate/react-redux,首先需要安装它。可以使用 NPMYarn 进行安装。

使用 NPM 安装:

使用 Yarn 安装:

使用方式

首先,你需要在你的项目中使用 Provider 来提供 Redux 的 store

这里的 store 是你创建的 Redux store,而 App 则是你需要展示的组件。

然后,你可以在你的组件中使用 connect 来连接 Redux:

-- -------------------- ---- -------
------ - ------- - ---- ---------------------------------
------ - --------- - ---- ---------------------

----- ------- - -- ------ --------- -- -- -
  -----
    --------------
    ------- --------------------------------------
  ------
--

----- -------- - ------- -- --
  ------ --------------
---

------ ------- ----------------- - --------- ------------

在这里,我们传递了一个 mapState 函数作为第一个参数,和一个包含 increment 操作的对象作为第二个参数。mapState 函数可以将 Redux 的 state 映射到组件的 props 上,而 increment 操作可以通过 props 来使用。

实践示例

这里提供一个完整的示例,以帮助你更好的了解如何使用 @redux-orchestrate/react-redux

-- -------------------- ---- -------
-- ----------
------ ----- --------- - ------------

------ ----- --------- - -- -- -- ----- --------- ---

----- ------------ - --

------ ------- -------- -------------------- - ------------- - ---- -- -
  ------ ------ -
    ---- ----------
      ------ ----- - --
    --------
      ------ ------
  -
-

-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - --------- ------- - ---- ---------------------------------
------ --------------- - --------- - ---- ------------

----- ----- - ----------------------------

----- ------- - -- ------ --------- -- -- -
  -----
    --------------
    ------- --------------------------------------
  ------
--

----- -------- - ------- -- --
  ------ ------
---

------ ------- ----------------- - --------- ------------

----------------
  --------- --------------
    -------- --
  ------------
  -------------------------------
--

在这个示例中,我们创建了一个简单的计数器,然后将 Redux 的 store 通过 Provider 提供给 React,最后使用 connect 来连接组件与 Redux。现在你可以试着运行这个示例代码,来看看它是如何工作的。

总结

@redux-orchestrate/react-redux 是一个非常有用的库,它可以帮助我们更好的集成 React 与 Redux,减少了很多不必要的代码,提高了代码的可读性和可维护性。相信在你使用 @redux-orchestrate/react-redux 之后,你的代码将会变得更加清晰和高效。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540fcd

纠错
反馈