23 从零到上手学习 React 框架教程

小节：集成路由与状态管理

在本小节中，我们将深入学习如何在 React 应用中集成路由和状态管理。我们将使用 React Router 进行路由管理，并使用 Redux 作为状态管理工具。

1. 安装依赖

首先，我们需要安装 React Router 和 Redux 相关的依赖包。在项目目录下运行以下命令：

npm install react-router-dom redux react-redux

2. 配置 React Router

2.1 创建基本路由

在 src 目录下创建一个新的文件 App.js，并配置基本路由。

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

2.2 创建页面组件

接下来，我们需要创建两个简单的页面组件 Home 和 About。

// src/Home.js
import React from 'react';

const Home = () => {
  return <h1>欢迎来到首页!</h1>;
};

export default Home;

// src/About.js
import React from 'react';

const About = () => {
  return <h1>关于我们</h1>;
};

export default About;

3. 状态管理集成 Redux

3.1 创建 Redux Store

在项目中创建一个新的文件 store.js，用于配置 Redux 的存储。

// src/store.js
import { createStore } from 'redux';

// 定义初始状态
const initialState = {
  count: 0,
};

// 定义 reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

// 创建 Redux store
const store = createStore(reducer);

export default store;

3.2 集成 Redux Provider

在 src/index.js 文件中，使用 Provider 组件将 store 提供给整个应用。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

3.3 在组件中使用 Redux 状态

在 Home 组件中，我们来添加一些按钮，以便用户能够增加和减少计数，并显示当前的计数值。

// src/Home.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Home = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>欢迎来到首页!</h1>
      <h2>当前计数: {count}</h2>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>增加</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>减少</button>
    </div>
  );
};

export default Home;

4. 总结

在本节中，我们学习了如何在 React 应用中集成 React Router 和 Redux。通过这些工具，我们可以实现灵活的路由管理以及高效的状态管理。

• 我们先配置了基本的路由，用于导航到不同的页面。
• 随后，我们设置了 Redux 状态管理，允许在应用中共享和管理状态。

这样，你就拥有了一个完整的 React 应用，能处理路由和全局状态管理。