Redux 教程：React Redux 的用法详解

Redux 是一个 JavaScript 的状态管理库，它与 React 一起使用，可以帮助我们更好地管理应用程序中的状态。在本文中，我们将详细介绍 Redux 的用法，并结合 React 实现一个简单的示例。

Redux 的基本概念

在介绍 Redux 的用法之前，我们需要了解一些基本概念。

Store

Store 是 Redux 的核心概念之一，它是一个保存应用程序状态的容器。在 Redux 中，Store 中的状态是不可变的，只能通过派发 Action 来更新。

Action

Action 是一个简单的 JavaScript 对象，它描述了发生了什么事件。例如，我们可以创建一个 Action 来表示用户登录成功：

const loginSuccessAction = {
  type: 'LOGIN_SUCCESS',
  payload: {
    username: 'john',
    email: 'john@example.com',
  },
};

Reducer

Reducer 是一个纯函数，它接收一个 Action 和当前状态，并返回一个新的状态。Reducer 是 Redux 中更新状态的唯一途径。

// javascriptcn.com 代码示例
function userReducer(state = null, action) {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return action.payload;
    case 'LOGOUT':
      return null;
    default:
      return state;
  }
}

Dispatch

Dispatch 是一个函数，它接收一个 Action 并将其发送到 Store 中。当一个 Action 被派发时，Reducer 将会被调用，并更新 Store 中的状态。

React Redux 的用法

React Redux 是 Redux 的官方绑定库，它提供了一些帮助我们在 React 中使用 Redux 的工具。

安装和配置

首先，我们需要安装 React Redux：

npm install react-redux

接下来，在我们的应用程序中创建一个 Store：

// javascriptcn.com 代码示例
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

function App() {
  return (
    <Provider store={store}>
      <div>
        ...
      </div>
    </Provider>
  );
}

在上面的代码中，我们使用 createStore 函数创建了一个 Store，并将其传递给 Provider 组件。Provider 组件是 React Redux 中的一个高阶组件，它将 Store 注入到 React 应用程序中的组件中。

连接组件

在 React Redux 中，我们可以使用 connect 函数将组件连接到 Store 中。

// javascriptcn.com 代码示例
import { connect } from 'react-redux';

function User({ user }) {
  return (
    <div>
      {user ? (
        <div>
          <p>Username: {user.username}</p>
          <p>Email: {user.email}</p>
        </div>
      ) : (
        <p>Please log in</p>
      )}
    </div>
  );
}

function mapStateToProps(state) {
  return {
    user: state.user,
  };
}

export default connect(mapStateToProps)(User);

在上面的代码中，我们使用 connect 函数将 User 组件连接到 Store 中。mapStateToProps 函数将 Store 中的状态映射到组件的 props 中。

派发 Action

我们可以使用 mapDispatchToProps 函数将派发 Action 的函数映射到组件的 props 中。

// javascriptcn.com 代码示例
import { connect } from 'react-redux';

function Login({ login }) {
  const handleLogin = () => {
    login({
      username: 'john',
      email: 'john@example.com',
    });
  };

  return (
    <div>
      <button onClick={handleLogin}>Log in</button>
    </div>
  );
}

function mapDispatchToProps(dispatch) {
  return {
    login: (user) => dispatch({ type: 'LOGIN_SUCCESS', payload: user }),
  };
}

export default connect(null, mapDispatchToProps)(Login);

在上面的代码中，我们使用 mapDispatchToProps 函数将 login 函数映射到 Login 组件的 props 中。当用户点击“Log in”按钮时，login 函数将会被调用，并派发一个 LOGIN_SUCCESS 的 Action。

示例代码

下面是一个使用 React Redux 的简单示例代码：

// javascriptcn.com 代码示例
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

function App() {
  return (
    <Provider store={store}>
      <div>
        <User />
        <Login />
      </div>
    </Provider>
  );
}

const store = createStore(userReducer);

function User({ user }) {
  return (
    <div>
      {user ? (
        <div>
          <p>Username: {user.username}</p>
          <p>Email: {user.email}</p>
        </div>
      ) : (
        <p>Please log in</p>
      )}
    </div>
  );
}

function Login({ login }) {
  const handleLogin = () => {
    login({
      username: 'john',
      email: 'john@example.com',
    });
  };

  return (
    <div>
      <button onClick={handleLogin}>Log in</button>
    </div>
  );
}

function userReducer(state = null, action) {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return action.payload;
    case 'LOGOUT':
      return null;
    default:
      return state;
  }
}

function mapStateToProps(state) {
  return {
    user: state.user,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    login: (user) => dispatch({ type: 'LOGIN_SUCCESS', payload: user }),
  };
}

const ConnectedUser = connect(mapStateToProps)(User);
const ConnectedLogin = connect(null, mapDispatchToProps)(Login);

export default App;

在上面的代码中，我们创建了一个 Store，并将其传递给 Provider 组件。User 组件使用 connect 函数连接到了 Store 中的状态。Login 组件使用 connect 函数将 login 函数映射到组件的 props 中。

总结

Redux 是一个强大的状态管理库，它能够帮助我们更好地管理应用程序中的状态。React Redux 是 Redux 的官方绑定库，它提供了一些帮助我们在 React 中使用 Redux 的工具。在本文中，我们详细介绍了 Redux 的基本概念和 React Redux 的用法，并结合一个简单的示例代码进行了演示。希望这篇文章能够帮助你更好地理解 Redux 和 React Redux。

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