Redux 与 react-router 结合使用-JavaScript中文网-JavaScript教程资源分享门户

前言

Redux 和 react-router 都是 React 库中非常重要的组件，Redux 用于管理应用中的状态，而 react-router 则用于处理和组织应用中的路由。这两个库在实际项目中经常被同时使用，本文旨在介绍 Redux 与 react-router 结合的最佳实践。

Redux

Redux 是一个状态管理库，能够有效地解决 React 应用中组件之间的状态传递问题。Redux 基于 Flux 架构而来，背后的理念是“单一来源的数据源”，即整个应用程序的状态被统一地存储在一个对象中。

Redux 有三个核心概念：

Store：应用状态的单一来源，被存储在一个 JavaScript 对象中；
Action：描述应用状态的变化；
Reducer：处理应用状态变化的函数。

下面是一个简单的 Redux 应用示例：

// javascriptcn.com 代码示例
import { createStore } from 'redux';

const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

const store = createStore(counterReducer);

store.subscribe(() => {
  console.log(store.getState());
});

store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

上面的代码中，我们使用 createStore 函数创建了一个 Store 对象，并定义了一个 Reducer 函数 counterReducer，之后对 Store 对象进行了操作。

react-router

react-router 是一个用于处理应用路由的库，其提供了 BrowserRouter、HashRouter、MemoryRouter 等多种路由方式，能够很好地帮助我们分发组件、处理路由跳转等功能。

下面是一个简单的 react-router 应用示例：

// javascriptcn.com 代码示例
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

const App = () => (
  <Router>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
    </nav>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </Router>
);

在上面的代码中，我们定义了两个组件 Home 和 About，用于展示不同的页面，之后在 App 组件中使用 BrowserRouter 组件包裹，使用 Link 组件实现路由跳转，使用 Route 组件进行路由匹配。

Redux 与 react-router 结合

Redux 与 react-router 最佳实践是将 router 中的路由信息作为一个 state，使用 action 来改变路由信息的同时还能同时改变其他部分的 state。因此我们可以使用 react-router-redux 这个库来辅助我们实现 Redux 与 react-router 的结合。

react-router-redux 提供了以下 API：

routerReducer：一个 Reducer，将 react-router 的路由信息存储在 state 中；
syncHistoryWithStore：根据 Store 对象创建一个新的 history 对象，并在 Store 更新时自动同步 react-router 和 Store 的状态；
routerMiddleware：Redux Middleware，能够拦截 action，处理路由信息。

下面是一个 Redux 与 react-router 结合的示例：

// javascriptcn.com 代码示例
import { createStore, applyMiddleware } from 'redux';
import { createBrowserHistory } from 'history';
import { ConnectedRouter, routerMiddleware, routerReducer } from 'react-router-redux';

const history = createBrowserHistory();

const reducer = combineReducers({
  router: routerReducer,
  ...otherReducers // 其他的 Reducer
});

const store = createStore(
  reducer,
  applyMiddleware(routerMiddleware(history))
);

// 同步状态
const syncedHistory = syncHistoryWithStore(history, store);

const App = () => (
  <Provider store={store}>
    <ConnectedRouter history={syncedHistory}>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </ConnectedRouter>
  </Provider>
);

在上面的代码中，我们首先创建了一个 history 对象，之后利用 react-router-redux 提供的方法将 history 对象同步到 Store 中，最后使用 ConnectedRouter 包裹应用组件，这样即可在应用中使用 react-router，并让路由信息与 Redux 集成。

总结

Redux 与 react-router 都是 React 生态中非常重要的库，如何巧妙地将它们结合起来使用是非常有必要的，而 react-router-redux 则为我们提供了最佳实践。实际开发中，我们应该根据应用情况和具体需求来选择最合适的方案。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654c2bd27d4982a6eb5ccc15