实战篇：React Flux 架构和 Redux-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代 web 开发中，React 已经成为了最受欢迎的前端框架之一。尽管 React 本身提供了一个灵活、强大的组件化编程模型，但是当我们需要管理复杂的应用状态时，React 原生的方法就显得有些不够优美和可维护了。

这就引入了 Flux 架构风格，它是由 Facebook 设计的，为了解决在应用中处理数据流的问题。Redux 则是 Flux 架构的一种实现，但它在细节上有很多创新和优化，逐渐成为了 React 应用状态管理的首选。

本文主要介绍 React 中的 Flux 架构和 Redux，包括这些概念的基本原理、设计思想和最佳实践。我们同时会提供代码示例以及有用的工具和建议。希望这篇文章能够帮助读者了解和应用这些技术，从而开发更好的 React 应用。

什么是 Flux？

Flux 是一个应用架构的理念和设计模式，它被设计用来更好地管理前端应用的状态和数据流。Flux 借鉴了经典的 MVC 架构，但是它从传统的单向数据流的角度出发，更好地解决了在复杂应用中状态管理的问题。受到了其灵活的设计和易于测试的特点，Flux 已经被应用在许多大型应用中，例如 Facebook、Airbnb、Netflix 等。

下面是 Flux 的基本原理：

视图(View)：表示用户界面，它通过 React 组件来实现。
动作(Action)：表示用户在应用中的操作行为，例如“添加一个任务”，“更新一个用户信息”等。这些动作只被用来描述状态的变化，而不需要关心如何处理这些变化。

{
  type: 'ADD_TASK',
  payload: {
    text: 'Write an article'
  }
}

调度器(Dispatcher)：负责将动作分发给应用中的各个部分。Dispatcher 会将所有的动作发送到一个或多个 Store 中。

dispatcher.dispatch({
  type: 'ADD_TASK',
  payload: {
    text: 'Write an article'
  }
});

数据仓库(Store)：表示应用中的状态数据，负责处理动作，并驱动界面的更新。Store 在修改状态时，必须返回一个新的状态对象，而不是修改原来的状态对象。这样做可以方便的跟踪状态的变化，并在出现问题时进行回溯。在 Store 的实现中，我们需要注意避免循环引用和副作用。

import { createStore } from 'redux';

const initialState = {
  tasks: []
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TASK':
      return {
        ...state,
        tasks: [...state.tasks, { text: action.payload.text }]
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

视图控制器(Controller-View)：表示视图和数据仓库的共同协作，它在 Store 中注册事件侦听器，并负责在 Store 更新时重新渲染组件。

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

class TaskList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.tasks.map((task, index) => (
          <li key={index}>{task.text}</li>
        ))}
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    tasks: state.tasks
  };
}

export default connect(mapStateToProps)(TaskList);

Flux 的最大特点就是单向数据流，这使得数据的流动更加容易追踪和推理。但是 Flux 也有其局限性，例如 Store 和 View 的直接通信可能会导致循环依赖和难以维护的代码。因此，Redux 应运而生，成为了更加精简和优雅的 Flux 实现。

什么是 Redux？

Redux 是一个 Flux 架构的轻量、简洁的实现，它完全基于函数式编程的思想，并提供了更好的工具和优化。Redux 的主要目标是让开发者管理整个应用的状态，使之成为不可变的状态树，并且使状态的操作和变化可以被可预测和追溯。由于 Redux 的特点，它被广泛应用在 React 应用中，并成为了 React 应用的状态管理首选。

下面是 Redux 的基本原理：

Store：本质上是一个状态容器，它包含了整个应用的状态树，并提供了一些常用的 API。Store 只是一个普通的 JavaScript 对象，它可以拥有多个中间件函数和监听器函数。

import { createStore } from 'redux';

const initialState = {
  tasks: []
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_TASK':
      return {
        ...state,
        tasks: [...state.tasks, { text: action.payload.text }]
      };
    default:
      return state;
  }
}

const store = createStore(reducer);

Action：是对状态树进行修改的唯一途径。Action 只包含了一个 type 字符串字段，它表示了操作的类型，同时还可以包含其它扩展字段作为 payload。

{
  type: 'ADD_TASK',
  payload: {
    text: 'Write an article'
  }
}

Reducer：是一个纯函数，它接收当前的状态和 Action，且返回一个新的状态。这也是 Redux 中最重要的部分，Reducer 通过可以组合实现不同的功能，例如合并不同的状态树、拆分成多个状态树、缓存中间状态等等。

function tasksReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_TASK':
      return [
        ...state,
        { text: action.payload.text }
      ];
    default:
      return state;
  }
}

function usersReducer(state = [], action) {
  switch (action.type) {
    case 'ADD_USER':
      return [
        ...state,
        { name: action.payload.name }
      ];
    default:
      return state;
  }
}

const rootReducer = combineReducers({
  tasks: tasksReducer,
  users: usersReducer
});

const store = createStore(rootReducer);

中间件(Middleware)：是 Redux 中非常强大的的一部分。中间件可以拦截、增强 Action 和 Reducer，并提供了增强 Store 的功能。中间件通常可以用来处理异步操作、日志系统、错误处理等等。

function loggerMiddleware(store) {
  return function(next) {
    return function(action) {
      console.log('Action:', action);
      const result = next(action);
      console.log('State:', store.getState());
      return result;
    };
  };
}

const store = createStore(
  rootReducer,
  applyMiddleware(loggerMiddleware)
);

连接器(Connector)：是 React-Redux 中非常重要的一个部分，它将 Store 的状态映射到 React 组件的 props 中，同时包装组件，使之成为可连接到 Store 的容器组件。

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

class TaskList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.tasks.map((task, index) => (
          <li key={index}>{task.text}</li>
        ))}
      </ul>
    );
  }
}

function mapStateToProps(state) {
  return {
    tasks: state.tasks
  };
}

export default connect(mapStateToProps)(TaskList);

Redux 的最大特点是它的函数式编程思想。通过遵循不可变性原则、纯函数的要求和单向数据流的规则，Redux 提供了优秀的可预测性和可维护性。这些特点也使得 Redux 成为了 React 应用中最流行和最可靠的状态管理机制。

Redux 和 Flux 有什么不同？

Redux 是由 Dan Abramov 设计开发的，它是 Flux 的一种变体。Redux 吸取了 Flux 的有点，并同时优化了传统的 Flux 架构。以下是 Redux 和 Flux 的主要区别：

轻量：Redux 只有 2KB 左右，而 Flux 通常需要引入多个库。
单一数据源：Redux 应用中的状态是一个单一的 JavaScript 对象，而 Flux 则需要创建多个 Store 来分别管理不同的状态。
纯函数：Redux 的 reducer 是纯函数，它只返回当前状态的一个副本，不会修改当前状态，而 Flux 的 Store 则会修改当前状态。
时间旅行：通过使用状态快照，Redux 可以支持时光旅行调试工具，而 Flux 则需要手动修改动作来回溯状态。
中间件：Redux 提供了非常强大和灵活的中间件系统，可以扩展和增强 Redux 功能，而 Flux 则需要编写多个 Store 和监听器。
与 React 集成更好：Redux 提供了 react-redux 库，使得它更加与 React 集成紧密，而 Flux 则需要写更多的代码来集成。

总结

在 React 开发中管理状态是非常重要的一部分，Flux 和 Redux 都是可以考虑的选择。Flux 是原始的状态管理模式，它提供了一种处理复杂应用状态的途径，但是它的实现比较

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

实战篇：React Flux 架构和 Redux

前言

什么是 Flux？

什么是 Redux？

Redux 和 Flux 有什么不同？

总结

纠错反馈