Flux 和 Redux 的对比-FunTeaLearn Online Web Tutorials

Flux 和 Redux 的对比

Flux 和 Redux 都是前端数据管理工具，它们可以帮助我们更好地管理应用中的状态。本篇文章将详细比较 Flux 和 Redux，帮助各位开发者更好地选择适合自己应用的数据管理工具。本文将分析 Flux 和 Redux 的实现原理、优缺点以及示例代码。

实现原理 Flux 和 Redux 都是单向数据流的数据管理工具。但是它们的实现原理有所不同。

Flux 通过 Dispatcher（派发器）、store 和 View（视图）三个核心部分来实现其单向数据流。当 view 触发 action 后，action 会被传递给 Dispatcher，Dispatcher 将 action 广播给 store，然后 store 根据 action 类型进行相应的操作，最后 store 将数据广播给 view，使 view 可以更新。

Redux 则是一个纯函数式编程风格的库，它的数据状态被统一存储在一个不可更改的 store 中。当 view 触发 action 后，store 接收并通过 Reducer 函数计算出新的状态，并返回给 view，使 view 可以更新。

优缺点 Flux 和 Redux 都有各自的优缺点，下面将进行详细比较。

2.1 Flux 的优缺点优点：

数据流清晰，易于调试：Flux 的单向数据流使得数据流程清晰，易于调试。
基础库简单：Flux 的实现比 Redux 简单，上手难度较低。

缺点：

数据流繁杂：Flux 的 Dispatcher 需要处理所有的 action，当应用逻辑变得复杂时，数据流将变得繁杂。
可测试性差：Flux 的 store 中有许多的操作和状态，使得测试用例的覆盖率难以提高。

2.2 Redux 的优缺点优点：

单一数据源：Redux 将所有的数据状态保存在单一的 store 中，使得数据流程易于跟踪，可维护性高。
可测试性强：Redux 可以使用 Reducer 测试功能模块，使得编写测试更加方便。

缺点：

冗长编写：Redux 的代码编写需要一定的思考和规划，相较于 Flux 的简单易用，需要付出更多的编程成本。
代码量大：Redux 的代码量较大，相较于 Flux，它需要更多的代码量。

示例代码下面将演示如何使用 Flux 和 Redux 来构建一个 TodoList 应用。

3.1 Flux 示例代码首先我们需要创建一个 Store 用于管理 TodoList 数据状态：

// www.javascriptcn.com code example
import dispatcher from '../dispatcher';
import { EventEmitter } from 'events';

class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.todos = [
      {
        id: 1,
        text: "Learn React",
        complete: false
      },
      {
        id: 2,
        text: "Learn Flux",
        complete: false
      }
    ];
  }

  getAll() {
    return this.todos;
  }

  addTodo(text) {
    const id = Date.now();
    this.todos.push({
      id,
      text,
      complete: false
    });
    this.emit('change');
  }

  handleActions(action) {
    switch(action.type) {
      case 'ADD_TODO': {
        this.addTodo(action.text);
        break;
      }
    }
  }
}

const todoStore = new TodoStore();
dispatcher.register(todoStore.handleActions.bind(todoStore));
window.dispatcher = dispatcher;
export default todoStore;

然后创建一个 Action:

import dispatcher from '../dispatcher';

export function addTodo(text) {
  dispatcher.dispatch({
    type: 'ADD_TODO',
    text
  });
}

最后在 View 中监听数据变化并进行更新：

// www.javascriptcn.com code example
import React from 'react';
import TodoStore from '../stores/TodoStore';
import { addTodo } from '../actions/TodoActions';

export default class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: TodoStore.getAll(),
      newTodo: ''
    };
    this.onChange = this.onChange.bind(this);
  }

  componentWillMount() {
    TodoStore.on('change', this.onChange);
  }

  componentWillUnmount() {
    TodoStore.removeListener('change', this.onChange);
  }

  onChange() {
    this.setState({
      todos: TodoStore.getAll()
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    addTodo(this.state.newTodo);
    this.setState({
      newTodo: ''
    });
  }

  handleChange(e) {
    this.setState({
      newTodo: e.target.value
    });
  }

  render() {
    const todos = this.state.todos.map((todo) => {
      return <li key={todo.id}>{todo.text}</li>;
    });

    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <input type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)} />
          <button type="submit">Add</button>
        </form>
        <ul>{todos}</ul>
      </div>
    );
  }
}

3.2 Redux 示例代码首先我们需要创建一个 Redux store 来管理 TodoList 的数据状态：

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

const ADD_TODO = 'ADD_TODO';

function todoReducer(state = [], action) {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          id: Date.now(),
          text: action.text,
          completed: false
        }
      ];

    default:
      return state;
  }
}

const store = createStore(todoReducer);

export default store;

然后定义一个 actionCreator 来创建 Action：

const ADD_TODO = 'ADD_TODO';

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  };
}

最后在 view 中使用 connect 函数进行数据的监听和更新：

// www.javascriptcn.com code example
import React from 'react';
import { connect } from 'react-redux';
import { addTodo } from '../actions/TodoActions';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newTodo: ''
    };
    this.onChange = this.onChange.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.dispatch(addTodo(this.state.newTodo));
    this.setState({
      newTodo: ''
    });
  }

  handleChange(e) {
    this.setState({
      newTodo: e.target.value
    });
  }

  onChange() {
    this.forceUpdate();
  }

  render() {
    const todos = this.props.todos.map((todo) => {
      return <li key={todo.id}>{todo.text}</li>;
    });

    return (
      <div>
        <form onSubmit={this.handleSubmit.bind(this)}>
          <input type="text" value={this.state.newTodo} onChange={this.handleChange.bind(this)} />
          <button type="submit">Add</button>
        </form>
        <ul>{todos}</ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    todos: state
  };
}

export default connect(mapStateToProps)(TodoList);

总结 Flux 和 Redux 都是前端数据管理工具，它们的实现原理和优缺点都有所不同。Flux 的 Dispatcher、store 和 View 结构相对比较简单，适合应用逻辑不太复杂的场景；而 Redux 则需要更多的代码和思考，可以更好地应对在应用逻辑变得复杂时的需求。本文通过演示 TodoList 应用来详细比较了 Flux 和 Redux 的优缺点，帮助开发者更好地选择适合自己应用的数据管理工具。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6458b2a4968c7c53b0b05cc6

Flux 和 Redux 的对比

程序员教程

程序员面试题库