计数器让你轻松了解react-redux

2023-12-08 17:25:47

react、redux和react-redux是构建现代Web应用程序的强大工具。react是一个用于构建用户界面的JavaScript库，redux是一个用于管理应用程序状态的可预测状态容器，react-redux是一个将react和redux连接起来的库。

react-redux通过使用Redux将应用程序的状态与UI组件连接起来。这使得组件可以访问Redux存储中的状态，并可以分派操作来修改该状态。这有助于确保应用程序的可预测性和可维护性。

在本指南中，我们将通过一个简单的计数器示例来演示react-redux的工作原理。我们将创建一个react组件来显示计数器的值，并使用redux来管理计数器的状态。

先决条件

在继续之前，您需要确保您已经安装了以下软件：

Node.js
npm
react
redux
react-redux

您可以使用以下命令安装这些软件：

npm install -g create-react-app
create-react-app my-app
cd my-app
npm install --save react-redux redux

设置Redux存储

第一步是设置Redux存储。Redux存储是一个JavaScript对象，它包含应用程序的状态。要设置Redux存储，您需要创建一个名为store.js的新文件，并在其中编写以下代码：

import { createStore } from 'redux';

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

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

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

export default store;

将组件连接到Redux存储

现在您已经设置了Redux存储，下一步是将组件连接到该存储。为此，您需要使用connect()方法。connect()方法是一个高阶组件，它将组件连接到Redux存储，并允许组件访问Redux存储中的状态和分派操作。

要在组件中使用connect()方法，您需要在组件的开头导入它，然后使用它来包裹组件。例如，以下代码将一个名为Counter的组件连接到Redux存储：

import React from 'react';
import { connect } from 'react-redux';

const Counter = (props) => {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <button onClick={props.incrementCount}>Increment</button>
      <button onClick={props.decrementCount}>Decrement</button>
    </div>
  );
};

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

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCount: () => dispatch({ type: 'INCREMENT' }),
    decrementCount: () => dispatch({ type: 'DECREMENT' })
  };
};

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

在组件中使用Redux操作

现在您已经将组件连接到Redux存储，下一步是学习如何在组件中使用Redux操作。Redux操作是纯函数，它们接受当前状态并返回一个新状态。要分派操作，您需要使用dispatch()方法。

在Counter组件中，我们有两个按钮，用于增加和减少计数器。当用户点击这些按钮时，我们将分派操作来更新Redux存储中的状态。以下代码演示了如何分派操作：

const Counter = (props) => {
  return (
    <div>
      <h1>Count: {props.count}</h1>
      <button onClick={props.incrementCount}>Increment</button>
      <button onClick={props.decrementCount}>Decrement</button>
    </div>
  );
};

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

const mapDispatchToProps = (dispatch) => {
  return {
    incrementCount: () => dispatch({ type: 'INCREMENT' }),
    decrementCount: () => dispatch({ type: 'DECREMENT' })
  };
};

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