Redux 技术分享：从 Not-Redux 到 Redux-JavaScript中文网-JavaScript教程资源分享门户

前言

Redux 是目前前端开发中最为流行的状态管理库之一。它的出现解决了 React 中组件之间状态共享的问题，使得我们可以更加方便地管理应用程序的状态。但是学习 Redux 并不是一件简单的事情，因为它有着自己的一套概念和工作流程。本文将介绍从 Not-Redux 到 Redux 的学习过程，帮助读者更好地理解 Redux 的核心概念和工作原理。

Not-Redux

在学习 Redux 之前，我们先来看一下 Not-Redux。Not-Redux 指的是在没有使用 Redux 的情况下，我们是如何在 React 中管理组件之间的状态的。以一个简单的计数器组件为例：

// www.javascriptcn.com code example
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default Counter;

在上面的代码中，我们使用了 React 提供的 useState 钩子来管理计数器组件的状态。每当用户点击加或减按钮时，我们都会调用 setCount 方法来更新 count 的值。这种方式看起来非常简单，但是它有一个明显的缺点：当组件层级比较深时，状态的传递将会变得非常麻烦。这时我们就需要使用 Redux 来解决这个问题。

Redux

Redux 是一个状态管理库，它可以让我们更加方便地管理应用程序的状态。Redux 的核心概念包括 store、action、reducer 和 middleware。

Store

Store 是 Redux 中最核心的概念之一。它是一个对象，包含了应用程序的所有状态。我们可以通过 createStore 方法来创建一个 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 { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

在上面的代码中，我们首先定义了一个初始状态 initialState。然后定义了一个 reducer 函数，它接收两个参数：state 和 action。state 表示当前的状态，action 表示用户的操作。在 reducer 函数中，我们根据不同的 action 类型来更新 state。最后，我们使用 createStore 方法来创建一个 store，并将 reducer 作为参数传入。

Action

Action 是 Redux 中的第二个核心概念。它是一个普通的 JavaScript 对象，用来描述用户的操作。一个 action 至少包含一个 type 属性，表示用户的操作类型。例如，在计数器应用程序中，我们可以定义两个 action：

const incrementAction = { type: 'INCREMENT' };
const decrementAction = { type: 'DECREMENT' };

Reducer

Reducer 是 Redux 中的第三个核心概念。它是一个函数，接收两个参数：state 和 action。在 reducer 函数中，我们根据不同的 action 类型来更新 state。例如，在计数器应用程序中，我们可以定义一个 reducer：

// www.javascriptcn.com code example
const initialState = { count: 0 };

function 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;
  }
}

在上面的代码中，我们首先定义了一个初始状态 initialState。然后定义了一个 reducer 函数，它接收两个参数：state 和 action。在 reducer 函数中，我们根据不同的 action 类型来更新 state。

Middleware

Middleware 是 Redux 中的第四个核心概念。它是一个函数，可以对 action 进行拦截和处理。例如，我们可以使用 redux-logger 中间件来记录每个 action 的日志：

import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';

const store = createStore(reducer, applyMiddleware(logger));

在上面的代码中，我们使用 applyMiddleware 方法来将 logger 中间件应用到 store 上。

Redux 的工作流程

Redux 的工作流程可以用下面这张图来描述：

用户触发一个 action。
Redux store 调用 reducer，传入当前的 state 和 action。
reducer 根据 action 类型更新 state。
Redux store 将新的 state 发送给所有订阅者。
React 组件根据新的 state 更新自身的状态。

Redux 示例代码

下面是一个简单的计数器应用程序的示例代码：

// www.javascriptcn.com code example
import React from 'react';
import { createStore } from 'redux';

const initialState = { count: 0 };

function 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;
  }
}

const store = createStore(reducer);

function Counter() {
  const handleIncrement = () => {
    store.dispatch({ type: 'INCREMENT' });
  };

  const handleDecrement = () => {
    store.dispatch({ type: 'DECREMENT' });
  };

  const { count } = store.getState();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

export default Counter;

在上面的代码中，我们首先定义了一个初始状态 initialState。然后定义了一个 reducer 函数，它接收两个参数：state 和 action。在 reducer 函数中，我们根据不同的 action 类型来更新 state。最后，我们使用 createStore 方法来创建一个 store，并将 reducer 作为参数传入。

在 Counter 组件中，我们定义了两个方法 handleIncrement 和 handleDecrement，用来触发 INCREMENT 和 DECREMENT action。我们还使用 store.getState 方法来获取当前的状态，并在组件中渲染出来。最后，我们将 Counter 组件导出，可以在其他地方使用。

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

Redux 技术分享：从 Not-Redux 到 Redux

前言