如何在 React App 中使用 React-redux store 和便加 Redux/thunk 导航?

在 React 应用中,使用 Redux 是一个非常流行的状态管理方案。Redux 提供了一个可预测的状态容器,使得应用的状态管理更加清晰和可维护。在实际应用中,我们经常需要在 React 应用中使用 Redux 来管理应用的状态。本文将介绍如何在 React 应用中使用 React-redux store 和便加 Redux/thunk 导航。

安装和配置

首先,我们需要安装 Redux 和 React-redux 库。可以使用 npm 或者 yarn 安装:

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

或者

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

安装完成后,我们需要在应用中配置 Redux。我们需要创建一个 Redux store,并将其提供给 React 应用中的组件。在 React 应用中,我们可以使用 React-redux 提供的 Provider 组件来提供 Redux store。

下面是一个简单的示例代码:

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

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

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

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

在上面的代码中,我们首先引入了 React、ReactDOM、React-redux 和 Redux 库。然后,我们创建了一个 Redux store,并将其提供给 Provider 组件。最后,我们将 Provider 组件和应用的根组件 App 渲染到页面上。

在组件中使用 Redux store

在 React 应用中,我们可以使用 React-redux 提供的 connect 函数来将 Redux store 中的状态映射到组件的 props 上。下面是一个简单的示例代码:

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

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

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

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

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

在上面的代码中,我们定义了一个 Counter 组件,它从 Redux store 中获取一个名为 count 的状态,并提供一个 increment 方法来更新该状态。然后,我们使用 connect 函数将 Counter 组件连接到 Redux store 上。

connect 函数接受两个参数:mapStateToPropsmapDispatchToPropsmapStateToProps 函数用于将 Redux store 中的状态映射到组件的 props 上,mapDispatchToProps 函数用于将 Redux store 中的操作映射到组件的 props 上。

使用 Redux-thunk 导航

在实际应用中,我们经常需要在 React 应用中使用 Redux-thunk 来处理异步操作。Redux-thunk 允许我们在 Redux store 中定义异步操作,并在操作完成后更新状态。下面是一个简单的示例代码:

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

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

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

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

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

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

在上面的代码中,我们首先引入了 Redux-thunk 和 React-router 库。然后,我们创建了一个浏览器历史记录对象,并使用 connected-react-router 提供的 routerMiddleware 函数将其与 Redux store 连接。最后,我们创建了一个 Redux store,并将 Redux-thunk 和 routerMiddleware 中间件应用到其中。

在组件中使用 Redux-thunk 导航非常简单。我们可以使用 push 函数来导航到不同的页面。下面是一个简单的示例代码:

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

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

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

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

在上面的代码中,我们定义了一个 Navigation 组件,它提供了三个按钮,用于导航到不同的页面。然后,我们使用 connect 函数将 Navigation 组件连接到 Redux store 上,并将 push 函数映射到组件的 props 上。

结论

在本文中,我们介绍了如何在 React 应用中使用 Redux 和 Redux-thunk。我们首先安装和配置了 Redux 和 React-redux 库,然后在组件中使用了 Redux store。最后,我们使用 Redux-thunk 导航到不同的页面。希望本文对你有所帮助,谢谢!

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6725ba432e7021665e189073