Mọi người thường chọn Redux trước khi họ cần nó. "Nhỡ app chúng ta không thể mở rộng mà không có Redux thì sao?". Sau đó, dev lại cau mày khi nhìn vào code của họ khi dùng Redux. "Sao lại phải chạm vào 3 file chỉ để chạy 1 feature đơn giản?".

Mọi người đổ lỗi cho Redux, React, lập trình hàm (functional programming), tính bất biến (immutability) và rất nhiều thứ khác vì họ thường so sánh với cách tiếp cận không yêu cầu "boilerplate" để cập nhật state, rồi họ kết luận luôn Redux là phức tạp. Redux bản chất thực sự là phức tạp mà, thiết kế từ đầu đã phức tạp rồi.

Redux yêu cầu:

  • Mô tả state của application như những plain object và array.
  • Mô tả những thay đổi trong hệ thống như những plain object.
  • Mô tả logic xử lý những thay đổi như những function thuần.

 Tất cả những hạn chế trên đều không bắt buộc khi xây dựng app (kể cả dùng hay không dùng React). Chúng thậm chí còn là những hạn chế rất lớn, nên bạn phải suy nghĩ thật kĩ trước khi áp dụng Redux dù chỉ một phần trong app của bạn.

Bạn có lý do thật sự tốt để áp dụng chúng không? 

Tôi thì lại thấy chúng rất hay vì chúng giúp tạo app:

Nếu bạn làm việc với extensible terminal, Javascript debugger, hoặc một số loại webapp khác, bạn có thể lựa chọn Redux, hoặc ít nhất cân nhắc một trong những ý tưởng của nó (chúng không hề mới).

Nếu bạn mới bắt đầu học React, đừng chọn Redux đầu tiên.

Thay vào đó hãy học nghĩ theo hướng React. Quay lại Redux khi bạn thực sự cần nó, hoặc bạn muốn thử thứ gì đó mới. Nhưng nên tiếp cận nó một cách cẩn thận.

Nếu bạn buộc phải làm việc theo cách của Redux, đó là dấu hiệu của đồng nghiệp coi trọng nó quá mức. Redux chỉ là một tool thôi, một thử nghiệm vượt giới hạn. 

Tóm lại, bạn đừng quên là bạn có thể tận dụng ý tưởng của Redux mà không cần sử dụng nó. Ví dụ, xem thử React component với local state sau:

import React, { Component } from 'react';

class Counter extends Component {
  state = { value: 0 };

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };
  
  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

Để như vậy là quá đẹp rồi. Bạn thậm chí có thể tái sử dụng component trên.

Sử dụng Redux, bạn sẽ phải thêm indirection vào để phân biệt "cái gì đã xảy ra" với "mọi thứ thay đổi như nào".

Lúc nào cũng làm như vậy là tốt? KHÔNG. Đó là thứ bạn phải đánh đổi khi dùng Redux.

Ví dụ, chúng ta có thể thu được reducer từ component:

import React, { Component } from 'react';

const counter = (state = { value: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}

class Counter extends Component {
  state = counter(undefined, {});
  
  dispatch(action) {
    this.setState(prevState => counter(prevState, action));
  }

  increment = () => {
    this.dispatch({ type: 'INCREMENT' });
  };

  decrement = () => {
    this.dispatch({ type: 'DECREMENT' });
  };
  
  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

Nhận thấy việc chúng ta sử dụng Redux mà không cần npm install  không? Tuyệt vời.

Bạn có nên làm như trên với stateful component không? Chắc là không nếu bạn không lên kế hoạch để thực sự tận dụng được nó. Lên kế hoạch trước luôn là chìa khóa để thành công đấy.

Thư viện Redux chỉ là công cụ giúp đỡ để gắn reducer vào object store global duy nhất. Bạn có thể sử dụng Redux bao nhiêu cũng được. 

Nhưng nhớ là phải lên chiến lược tận dụng tối đa sức mạnh của nó trước khi áp dụng nhé.

Bài viết được dịch từ nguồn: https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.4wglzpgpp