Redux 如何使用 React-Redux 联合开发-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Redux 是一个流行的状态管理库，能够简化应用程序中的状态管理和数据流。React-Redux 则是将 Redux 库集成到 React 应用程序中的官方绑定库。使用 React-Redux，可以更轻松地管理应用程序的状态，增强代码重用性和可维护性。

本文将深入介绍 Redux 如何使用 React-Redux 联合开发，包含以下几个方面：

安装和配置 React-Redux
了解 Redux 中的 Provider
连接 React 组件到 Redux Store
使用 mapStateToProps 和 mapDispatchToProps

安装和配置 React-Redux

使用 React-Redux 开发需要先进行安装和配置。首先安装 Redux 和 React-Redux：

npm install redux react-redux --save

接下来，在应用程序开发中，需要创建一个 Redux store。在将 Redux Store 集成到 React 应用程序中之前，首先需要创建一个简单的 Redux Store：

// www.javascriptcn.com code example
import { createStore } from "redux";

const initialState = {
  count: 0,
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export const store = createStore(reducer);

了解 Redux 中的 Provider

在 React-Redux 库中，有一个 Provider 组件，它是在 React 中使用 Redux 的关键，它会将 Redux 的 Store 传递给应用程序中的所有组件。

要将 Redux Store 与 React 组件连接起来，将 Provider 组件嵌套在应用程序的根组件中，可以像下面这样编写应用程序的入口文件：

// www.javascriptcn.com code example
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")
);

注意，上面的代码中，Provider 组件中包含了 app 根组件，在使用 Provider 组件时，需要将 store 属性赋值为 Redux Store 对象，这样就可以在整个 React 应用程序中使用它了。

连接 React 组件到 Redux Store

在使用 React-Redux 时，需要将 React 组件连接到 Redux Store，以便从 Redux 中取得数据和触发操作。React-Redux 提供了两个函数，connect 和 useSelector，让 React 组件可以连接到 Redux Store。

下面是一个简单的例子，展示了如何将 connect 函数与 React 组件连接起来：

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

class Counter extends React.Component {
  render() {
    const { count, increment, decrement } = this.props;
    return (
      <div>
        <div>Count: {count}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { count: state.count };
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: "INCREMENT" }),
    decrement: () => dispatch({ type: "DECREMENT" }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

上面的例子中，我们在 Counter 组件中使用了 connect 函数将 Redux Store 和 Counter 组件连接起来。connect 函数接受两个参数：

mapStateToProps：映射应用程序状态到组件的 props。
mapDispatchToProps：将 action 分发器映射到组件的 props。

对于 Counter 组件，我们需要将 store 状态映射到 count 属性，并将 increment 和 decrement 方法分发到 Counter 组件的 props 中。

在上面的实例中，通过作为 connect 的参数，将 mapStateToProps 和 mapDispatchToProps 传递给 Counter 组件，它们将被注入到 Counter 组件的 props 中。下一节将更详细地介绍这些函数的使用。

使用 mapStateToProps 和 mapDispatchToProps

mapStateToProps 和 mapDispatchToProps 是 React-Redux 库提供的两个辅助函数，用于将 Redux Store 中的状态数据注入到组件中，并将 action 分发器注入到组件中，以允许组件更新状态和分发操作。

例如，以上面的 Counter 组件为例，可以使用 mapStateToProps 和 mapDispatchToProps 函数将状态和 action 分发器注入到 Counter 组件中：

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

class Counter extends React.Component {
  render() {
    const { count, increment, decrement } = this.props;
    return (
      <div>
        <div>Count: {count}</div>
        <button onClick={increment}>+</button>
        <button onClick={decrement}>-</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return { count: state.count };
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: "INCREMENT" }),
    decrement: () => dispatch({ type: "DECREMENT" }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

mapStateToProps 函数允许将组件中的属性映射到 Redux Store 中的状态值。在上面的实例中，我们通过 connect 函数以 mapStateToProps 为参数将 count 属性与 Redux Store 中的 count 状态进行关联，这样就可以在 Counter 组件中访问这个属性了。

同样，mapDispatchToProps 函数允许将 action 分发器映射到组件属性上。在上面的例子中，我们在 connect 函数中以 mapDispatchToProps 参数将 increment 和 decrement 方法分发到 Counter 组件上。

综上所述，React-Redux 是一个方便的状态管理库，它可以使应用程序更容易管理和更新。通过阅读本文，您应该了解了如何安装和配置 React-Redux，如何连接 React 组件到 Redux Store，并如何使用 mapStateToProps 和 mapDispatchToProps 函数注入状态数据和 action 分发器。使用这些技术，您可以轻松地编写出高效、可维护的 React 应用程序。

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

Redux 如何使用 React-Redux 联合开发

安装和配置 React-Redux

了解 Redux 中的 Provider

连接 React 组件到 Redux Store

使用 mapStateToProps 和 mapDispatchToProps

接着读