使用 redux-contexts 包-JavaScript中文网-JavaScript教程资源分享门户

本文介绍 npm 包 redux-contexts 的使用教程。该包提供了一种简单的共享状态的方式，使得我们可以轻松地在 React 应用中共享状态。

安装

使用 npm 安装 redux-contexts：

npm install redux-contexts

同时，我们还需要安装 Redux：

npm install redux

引入

在需要使用 redux-contexts 的文件中，使用如下代码引入：

import { createContexts } from "redux-contexts";

创建 provider 和 store

在使用 redux-contexts 之前，我们需要先创建 provider 和 store。

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

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

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

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

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

在上面的示例中，我们先定义了一个初始的状态 initialState，然后编写 reducer 函数处理 state 的变化，接着使用 createStore 创建 store。

最后，我们调用 createContexts() 创建 provider 和 contexts，并把它们分别导出。注意，contexts 中包含的内容在后面会用到。

使用

现在，我们已经创建好了 provider 和 store，接下来我们来看如何使用它们。

使用 Provider

Provider 是 React 中的一个组件，可以将 store 的数据传递到整个组件树中。我们需要在入口文件中将其包裹：

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

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

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

上面的代码中，我们先引入了 React 和 ReactDOM，然后引入了 Provider 和 MyProvider，最后，在 ReactDOM.render() 方法中渲染整个应用程序。

注意，在使用 Provider 的时候，我们还需要将 redux 的 store 传递给它，这里我们传递了上一步创建的 store。同时，我们也需要将我们自己创建的 provider 包裹在 react-redux 的 Provider 中。

使用 Contexts

使用 contexts 时，我们需要在自己的组件中使用 useContext()，来获取(Contexts)里面包含的上下文内容。例如：

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

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

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

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

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

上面的代码中，我们首先引入了 useContext，并使用它从 Contexts 中获取了 state 和 dispatch。

最后，我们将 count 和两个按钮渲染到页面上，并监听按钮的点击事件。当点击 Increment 按钮时，我们使用 dispatch 发送一个 INCREMENT 的 action，从而更新 state 中的 count 值。当点击 Decrement 按钮时，我们使用 dispatch 发送一个 DECREMENT 的 action。

Redux DevTools

使用 Redux DevTools 可以帮助我们更好地调试 Redux 应用程序。我们可以使用 Redux DevTools Extension 轻松地集成 Redux DevTools。

“redux-devtools-extension” 是一个用于 redux 的 Chrome/Firefox 扩展程序，安装非常简单：

对于 Chrome，访问谷歌商店下载“redux-devtools-extension”。
对于 Firefox，访问 firefox 插件市场下载“redux-devtools-extension”。

要使用该插件，只需要在 store.js 脚本中使用如下语句就可以了：

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

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

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

结论

在本文中，我们介绍了如何使用 redux-contexts，相信通过学习本文，您已经掌握了 redux-contexts 的使用方法。接下来，您可以根据自己的需求，灵活地使用它。

参考

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a67