React学习第七天——Redux入门指南

2023-11-21 00:58:03

Redux：实现单向数据流的高效状态管理库

Redux，一个备受推崇的JavaScript库，应运而生，旨在为构建用户界面提供强大的支持。通过遵循Flux设计模式，它引入了单向数据流的概念，从而简化了应用程序的状态管理。了解Redux的基本组件和工作原理，为你的应用开发之旅铺平道路。

Redux：核心概念一览

动作（Action）：
动作是组件发出的信息，指示要对状态执行的更改。它们包含一个 type 属性，指定要采取的行动，以及其他所需更改的数据。

归约器（Reducer）：
归约器是负责响应动作并更新状态的纯函数。它们根据动作类型和当前状态，生成一个新的状态对象。

存储（Store）：
存储是Redux的中央枢纽，它存储着应用的当前状态。它是状态的唯一来源，组件通过它获取和更新状态。

Redux：使用步骤指南

踏入Redux的世界，只需几个简单的步骤：

安装Redux： 使用 npm install redux 命令安装Redux库。
创建存储： 使用 createStore 函数创建一个存储，提供一个或多个归约器作为参数。
创建归约器： 定义归约器函数，根据动作类型和当前状态生成新的状态。
注册归约器： 使用 combineReducers 函数将归约器组合在一起，并将其传递给 createStore 函数。
组件中使用Redux： 使用 connect 方法连接组件和存储，允许组件访问状态和分派动作。

代码示例：

import { createStore, combineReducers } from 'redux';

// 定义归约器
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

// 创建存储
const store = createStore(combineReducers({
  counter: counterReducer
}));

// 组件连接到Redux存储
const Counter = ({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={increment}>+</button>
    <button onClick={decrement}>-</button>
  </div>
);

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

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

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