如何配合使用 React Router 4 和 Redux-JavaScript中文网-JavaScript教程资源分享门户

React Router 是 React 中常用的路由库，它可以帮助我们在应用中实现页面之间的跳转。然而，如果我们需要将路由状态保存在 Redux 中，就需要配合使用 React Router 4 和 Redux。

安装

首先，我们需要安装 React Router 4 和 Redux。可以使用以下命令进行安装：

npm install react-router-dom redux react-redux --save

配置路由

在使用 React Router 4 时，我们需要在应用的入口文件中配置路由。我们可以创建一个名为 App.js 的文件，并在其中导入 React Router 4 相关的组件和页面组件。下面是一个简单的示例：

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

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

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

在上面的示例中，我们使用 BrowserRouter 组件作为路由容器，并在其中定义了两个路由规则，分别匹配根路径和 /about 路径。对于每个路由规则，我们都指定了相应的页面组件。

配置 Redux

接下来，我们需要配置 Redux。我们可以创建一个名为 store.js 的文件，并在其中定义 Redux 的 store。下面是一个简单的示例：

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

export default store;

在上面的示例中，我们使用 createStore 函数创建了一个 Redux 的 store，并传入了一个 rootReducer。这个 rootReducer 是一个函数，它用于将多个 reducer 合并为一个 reducer。我们可以在 reducers.js 文件中定义多个 reducer，并将它们合并为一个 rootReducer，如下所示：

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

const rootReducer = combineReducers({
  routing: routerReducer,
});

export default rootReducer;

在上面的示例中，我们使用 combineReducers 函数将 routerReducer 合并到了 rootReducer 中。这样，我们就可以将路由状态保存在 Redux 中了。

使用路由和 Redux

现在，我们已经配置好了路由和 Redux，接下来就可以在页面中使用它们了。我们可以在页面组件中导入 react-router-dom 和 react-redux 相关的组件，并使用它们来获取路由状态和 dispatch action。下面是一个简单的示例：

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

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

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

在上面的示例中，我们使用 connect 函数将组件连接到 Redux，并将 push action 作为 props 传递给组件。当用户点击按钮时，我们就可以使用 push action 来跳转到 /about 路径了。

总结

在本文中，我们介绍了如何配合使用 React Router 4 和 Redux。首先，我们需要在应用的入口文件中配置路由，并在其中定义路由规则和页面组件。接着，我们需要在 store.js 文件中定义 Redux 的 store，并将多个 reducer 合并为一个 rootReducer。最后，我们可以在页面组件中使用 react-router-dom 和 react-redux 相关的组件来获取路由状态和 dispatch action。

完整示例代码可以在 GitHub 上找到。

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