React-Redux 实现单页面应用-JavaScript中文网-JavaScript教程资源分享门户

在现代 web 应用开发中，单页面应用（SPA）变得越来越流行。SPA 的特点是只有一个页面，用户在与应用交互时，只会加载或更新部分页面内容，而不是整个页面。这种方式可以提高应用性能和用户体验。

React 是一个流行的前端框架，它可以被用来构建 SPA。React 的组件化设计可以帮助我们将应用分解为一系列小型组件，这些组件可以被重复使用，并且易于维护。React-Redux 是一个状态管理工具，它提供了一些方法来管理应用的状态并将其分发给 React 组件。

本文将介绍如何使用 React-Redux 来构建一个简单的 SPA。我们会讨论如何设计 Redux 的 store，并使用 React 组件来显示和修改应用状态。我们还将学习如何使用 React-Router 来处理应用的路由，以及如何使用 Redux-Thunk 来处理异步操作。

环境

在开始之前，我们需要确保已经安装了以下工具：

Node.js
npm

在命令行中输入以下命令来安装 React 和 Redux：

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

Redux Store

Redux 中的 store 是一个对象，它管理着应用的状态。在本例中，我们的应用状态将包含 User 对象、Post 对象以及一些 UI 参数。我们可以使用 Redux 的 combineReducers 函数来组合多个 reducer。

这是一个简单的示例 createStore 函数：

// www.javascriptcn.com code example
import { createStore, applyMiddleware, combineReducers } from 'redux';
import thunk from 'redux-thunk';

import { userReducer, postReducer, uiReducer } from './reducers';

const rootReducer = combineReducers({
  user: userReducer,
  post: postReducer,
  ui: uiReducer
});

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

在上面的代码中，我们定义了三个 reducer：userReducer、postReducer 和 uiReducer。这些 reducer 分别处理用户数据、帖子数据和 UI 参数。我们将它们组合在一起，得到 rootReducer，最后使用 applyMiddleware 函数来添加 Redux-Thunk 中间件。

React Components

React 组件是构建 SPA 的基本单元。在本例中，我们需要创建一个可以显示和修改我们应用状态的组件。以下是一个示例组件：

// www.javascriptcn.com code example
import { useSelector, useDispatch } from 'react-redux';
import { getUser, updateUser } from '../actions/userActions';

function Profile() {
  const user = useSelector(state => state.user);
  const dispatch = useDispatch();

  function handleUpdate(event) {
    const data = new FormData(event.target);

    dispatch(updateUser({ data }));
    event.preventDefault();
  }

  useEffect(() => {
    dispatch(getUser());
  }, [dispatch]);

  return (
    <div className="profile">
      <h1>{user.name}</h1>
      <form onSubmit={handleUpdate}>
        <input name="name" defaultValue={user.name} />
        <input name="email" defaultValue={user.email} />
        <button type="submit">Save</button>
      </form>
    </div>
  );
}

export default Profile;

在上面的代码中，我们使用了 useSelector 和 useDispatch 钩子来访问 Redux store。useSelector 钩子从 store 中获取 user 对象，dispatch 钩子帮助我们发起 updateUser 和 getUser 操作。

我们使用 useEffect 钩子来在组件挂载时获取初始数据：

useEffect(() => {
  dispatch(getUser());
}, [dispatch]);

在获取数据完成后，我们可以将数据映射到组件中：

<h1>{user.name}</h1>

我们还可以使用表单元素来修改我们的用户数据。在这个例子中，我们会使用 updateUser 操作来发起一个 POST 请求来更新用户信息。

Routing

我们使用 React-Router 来处理 SPA 中的路由。以下是一个简单的 index.js 文件，它处理应用的路由：

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

import store from './store';
import Home from './components/Home';
import Profile from './components/Profile';

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/profile" component={Profile} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root')
);

在上面的代码中，我们使用 BrowserRouter 来创建一个路由。我们定义了两个路由：/ 和 /profile。Home 和 Profile 组件分别与这两个路由相关联。Switch 组件帮助我们确保只有一个组件被渲染。最后，我们将整个 App 组件包裹在 Provider 中，以便我们可以方便地访问 store。

Wrap-up

本文介绍了如何使用 React-Redux 来构建一个简单的 SPA。我们讨论了如何设计 Redux 的 store，并使用 React 组件来显示和修改应用状态。我们还学习了如何使用 React-Router 来处理路由，以及如何使用 Redux-Thunk 来处理异步操作。这个例子应该可以帮助您入门 React 和 Redux 开发。

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

React-Redux 实现单页面应用

环境

Redux Store

React Components

Routing

Wrap-up

接着读