Bạn có thể không cần Redux
Nhiều người quyết định sử dụng Redux trước khi họ thực sự cần nó, lo lắng rằng ứng dụng của họ sẽ không hoạt động bình thường nếu họ không làm như vậy. Sau đó, các nhà phát triển hối hận về quyết định này vì Redux làm cho mã của họ phức tạp hơn và họ phải chỉnh sửa nhiều tệp để thực hiện những thay đổi nhỏ.
Mọi người đang đổ lỗi cho những thứ khác nhau, chẳng hạn như Redux, React, lập trình chức năng và tính bất biến, cho các vấn đề của họ. Tôi hiểu tại sao họ đang làm điều này. Việc so sánh Redux với một cách tiếp cận không cần thêm mã để thay đổi trạng thái là điều bình thường và sau đó quyết định rằng Redux quá phức tạp. Theo một số cách nó là như vậy, và đó là cố ý.
Redux cung cấp một sự đánh đổi. Nó yêu cầu bạn:
- Mô tả trạng thái ứng dụng dưới dạng các đối tượng và mảng đơn giản.
- Mô tả những thay đổi trong hệ thống dưới dạng các đối tượng đơn giản.
- Mô tả logic để xử lý các thay đổi dưới dạng hàm thuần túy.
Bạn không phải sử dụng bất kỳ hạn chế nào trong số này khi tạo ứng dụng, cho dù ứng dụng đó có sử dụng React hay không. Đây là những quy tắc rất nghiêm ngặt và bạn nên suy nghĩ cẩn thận trước khi sử dụng bất kỳ quy tắc nào trong ứng dụng của mình.
Bạn có lý do chính đáng để làm như vậy?
Những hạn chế này hấp dẫn tôi vì chúng giúp xây dựng các ứng dụng:
- Lưu trạng thái của ứng dụng trên thiết bị của người dùng và khởi động ứng dụng với trạng thái đã lưu đó.
- Điền trước trạng thái trên máy chủ, gửi nó tới thiết bị của người dùng bằng HTML và khởi động ứng dụng với trạng thái được điền sẵn đó.
- Ghi lại hành động của người dùng và lưu chúng với ảnh chụp nhanh trạng thái để nhà phát triển sản phẩm có thể phát lại chúng để tìm và sửa lỗi.
- Gửi các đối tượng hành động qua internet để tạo môi trường cộng tác mà không thực hiện các thay đổi lớn đối với mã.
- Giữ một bản ghi các thay đổi hoặc thực hiện các thay đổi mà không thực hiện các thay đổi lớn đối với mã.
- Quay đi quay lại giữa lịch sử trạng thái trong khi phát triển và kiểm tra trạng thái hiện tại từ lịch sử hành động khi mã thay đổi.
- Cung cấp cho nhà phát triển sản phẩm toàn quyền kiểm soát và khả năng kiểm tra để họ có thể tạo các công cụ tùy chỉnh cho ứng dụng của mình.
- Tạo giao diện người dùng thay thế trong khi sử dụng lại hầu hết logic nghiệp vụ.
Nếu bạn đang phát triển một thiết bị đầu cuối có thể mở rộng, trình gỡ lỗi JavaScript hoặc ứng dụng web, thì có thể đáng để thử hoặc ít nhất là suy nghĩ về một số khái niệm (chúng không mới!).
Nếu bạn chưa quen với React, đừng chọn Redux làm tùy chọn đầu tiên.
Hãy thử suy nghĩ về React trước và chỉ sử dụng Redux nếu bạn thực sự cần nó hoặc nếu bạn muốn thử một cái gì đó mới. Hãy cẩn thận khi sử dụng Redux, giống như bạn làm với bất kỳ công cụ nào khác có ý kiến mạnh mẽ.
Nếu bạn cảm thấy mình phải làm mọi thứ theo một cách nhất định vì Redux, điều đó có thể có nghĩa là bạn hoặc những người bạn đang làm việc cùng đang quá nghiêm túc. Redux chỉ là một trong những công cụ bạn có thể sử dụng và không nên quá coi trọng nó.
Cuối cùng, hãy nhớ rằng bạn có thể sử dụng một số khái niệm từ Redux trong mã của mình mà không cần thực sự sử dụng Redux. Ví dụ: bạn có thể sử dụng trạng thái cục bộ trong thành phần React:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">Counter</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> value <span class="token punctuation">,</span> setValue <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span> <span class="token punctuation">(</span> <span class="token number">0</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setValue</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">prevState</span> <span class="token punctuation">)</span> <span class="token operator">=></span> prevState <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">decrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">setValue</span> <span class="token punctuation">(</span> <span class="token punctuation">(</span> <span class="token parameter">prevState</span> <span class="token punctuation">)</span> <span class="token operator">=></span> prevState <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span><span class="token plain-text"> Counter: </span><span class="token punctuation">{</span> value <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token plain-text">+</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> decrement <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token plain-text">-</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> Counter <span class="token punctuation">;</span> |
Không sao cả. Bạn nên thực sự ghi nhớ điều này.
Nhà nước địa phương là tốt.
Redux đưa ra một sự cân bằng trong đó chúng ta có thể tách biệt các chi tiết về những gì đã xảy ra với cách trạng thái thay đổi, nhưng nó không phải lúc nào cũng là lựa chọn tốt nhất. Đó là một sự đánh đổi mà chúng ta phải cân nhắc khi quyết định cách cấu trúc mã của mình. Ví dụ: chúng ta có thể di chuyển logic về cách trạng thái thay đổi ra khỏi thành phần của chúng ta và vào một bộ giảm tốc:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <span class="token keyword">import</span> <span class="token punctuation">{</span> useReducer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"react"</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">counter</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token parameter">state <span class="token operator">=</span> <span class="token punctuation">{</span> value <span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> action</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span> action <span class="token punctuation">.</span> type <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">"INCREMENT"</span> <span class="token operator">:</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> value <span class="token operator">:</span> state <span class="token punctuation">.</span> value <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">"DECREMENT"</span> <span class="token operator">:</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> value <span class="token operator">:</span> state <span class="token punctuation">.</span> value <span class="token operator">-</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">default</span> <span class="token operator">:</span> <span class="token keyword">return</span> state <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">CounterReducer</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token punctuation">[</span> state <span class="token punctuation">,</span> dispatch <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useReducer</span> <span class="token punctuation">(</span> counter <span class="token punctuation">,</span> <span class="token punctuation">{</span> value <span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">increment</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> type <span class="token operator">:</span> <span class="token string">"INCREMENT"</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">decrement</span> <span class="token operator">=</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">dispatch</span> <span class="token punctuation">(</span> <span class="token punctuation">{</span> type <span class="token operator">:</span> <span class="token string">"DECREMENT"</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> div</span> <span class="token punctuation">></span></span><span class="token plain-text"> CounterReducer: </span><span class="token punctuation">{</span> state <span class="token punctuation">.</span> value <span class="token punctuation">}</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> increment <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token plain-text">+</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> button</span> <span class="token attr-name">onClick</span> <span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span> <span class="token punctuation">{</span> decrement <span class="token punctuation">}</span></span> <span class="token punctuation">></span></span> <span class="token plain-text">-</span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> button</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> div</span> <span class="token punctuation">></span></span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">export</span> <span class="token keyword">default</span> CounterReducer <span class="token punctuation">;</span> |
Chúng tôi đã có thể sử dụng Redux mà không cần phải tải xuống trước (cài đặt npm …). Tuyệt vời!
Bạn không nên làm điều này với các thành phần trạng thái của mình trừ khi bạn có lý do chính đáng để làm như vậy. Bạn cần phải có một kế hoạch để làm cho nó xứng đáng. Có một kế hoạch là để thành công.
Redux là một bộ công cụ giúp bạn kết hợp các phần dữ liệu khác nhau vào một cửa hàng toàn cầu. Bạn có thể chọn lượng Redux mà bạn muốn sử dụng.
Nếu bạn cho đi thứ gì đó, hãy chắc chắn rằng bạn sẽ nhận lại được thứ gì đó.