Redux + React Router 管理应用路由-FunTeaLearn Online Web Tutorials

在开发前端应用时，路由是一个不可或缺的部分，它能帮助用户方便地浏览和访问各个页面，提高用户的体验。然而随着应用逐渐扩大，路由状态的管理变得越来越困难。Redux 和 React Router 可以相互结合，帮助我们更好地管理应用的路由。

Redux 简介

Redux 是一个 JavaScript 状态管理库，它可以让你更 easy 地管理应用的状态。Redux 有三大原则：

单一数据源：整个应用的状态都被储存在一个 Object Tree 中，由一个 store 进行管理。
状态只读：唯一改变状态的方式就是向 store 发送 action，这个 action 包含一些信息，描述了状态的变化。
状态改变只能通过纯函数完成：使用纯函数（又称为 reducer ）计算上一个版本的 state 和一个 action。

React Router 简介

React Router 是 React 中管理路由的库，它可以让你构建单页面应用，并在 URL 中嵌入页面信息。React Router 包含三种类型的组件：

Router：React Router 根组件，通常情况下，使用 <browserrouter>。
Route：代表 URL 路径与组件之间的一一对应关系。
Link：代表页面间的导航链接。

Redux 与 React Router 结合使用

Redux 和 React Router 都是可以独立运行的工具，但是结合使用会更加灵活和便于管理应用状态和路由。具体实现过程：

首先需要把 React Router 嵌套在 Redux 构建的 Provider 中。

// www.javascriptcn.com code example
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import rootReducer from './reducers';

//创建store
const store = createStore(rootReducer);

const App = () => (
  <Provider store={store}>
    <Router>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  </Provider>
);

编写 action 创建函数和 reducer，用于管理路由状态

// www.javascriptcn.com code example
// actions.js
export const SET_ROUTE = 'SET_ROUTE';

export function setRoute(route) {
  return { type: SET_ROUTE, route };
}

// reducer.js
import { SET_ROUTE } from '../actions';

const initialState = {
  route: '/',
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case SET_ROUTE:
      return Object.assign({}, state, { route: action.route });
    default:
      return state;
  }
}

export default rootReducer;

在 React Router 的 Route 路径上绑定路由状态的 action，比如绑定 Link 的 click 事件

// www.javascriptcn.com code example
import { connect } from 'react-redux';
import { setRoute } from '../actions';

const About = ({ dispatch }) => (
  <div>
    <h2>About</h2>
    <Link
      to="/contact"
      onClick={() => dispatch(setRoute('/contact'))}
    >
      Go to Contact
    </Link>
  </div>
);

export default connect()(About);

在组件中使用 react-redux 提供的 connect 方法来读取路由状态以及其他需要共享的状态

// www.javascriptcn.com code example
import { connect } from 'react-redux';

const Home = ({ route }) => (
  <div>
    <h2>Home</h2>
    <p>Current route is: {route}</p>
  </div>
);

const mapStateToProps = state => ({
  route: state.route,
});

export default connect(mapStateToProps)(Home);

以上是一个简单的 React Router 和 Redux 配合使用的实现过程。结合使用 Redux 和 React Router，可以方便地管理应用的状态和路由，代码结构也更加清晰和简洁。

结语

通过 Redux 和 React Router 的结合使用，我们可以更好地管理应用状态和路由，提升用户体验，以及更清晰简洁的代码。希望本文对你了解 Redux 和 React Router 的协同使用有所帮助，在使用过程中，要注意状态设计的正确性和规范性，编写出质量更好的应用。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780cb4ece7f48612549b36c

Redux + React Router 管理应用路由

Redux 简介

React Router 简介

Redux 与 React Router 结合使用

结语

程序员教程

程序员面试题库