Tôi thường đăng những thứ liên quan đến mã trên Stack, nhưng đây là câu hỏi nhiều hơn về suy nghĩ chung của cộng đồng.

Có vẻ như có rất nhiều người ủng hộ việc sử dụng Redux với React để quản lý dữ liệu / trạng thái, nhưng trong khi đọc và học cả hai, tôi đã bắt gặp một số điều có vẻ không ổn.

Redux

Ở cuối trang này: http://redux.js.org/docs/basics/UsageWithReact.html (Vượt qua cửa hàng), nó khuyên bạn nên sử dụng "Magic" của React 'Context'.

Một tùy chọn sẽ là chuyển nó làm chỗ dựa cho mọi thành phần container. Tuy nhiên, nó trở nên tẻ nhạt, vì bạn phải truyền lưu trữ ngay cả thông qua các thành phần trình bày chỉ vì chúng tình cờ hiển thị một vùng chứa sâu trong cây thành phần.

Tùy chọn mà chúng tôi đề xuất là sử dụng một thành phần React Redux đặc biệt được gọi để làm cho cửa hàng có sẵn một cách kỳ diệu cho tất cả các thành phần vùng chứa ...

Phản ứng

Trên trang React Context ( https://facebook.github.io/react/docs/context.html ), nó có một cảnh báo ở trên cùng:

Ngữ cảnh là một tính năng nâng cao và thử nghiệm. API có thể sẽ thay đổi trong các bản phát hành trong tương lai.

Sau đó ở dưới cùng:

Cũng như các biến toàn cục tốt nhất nên tránh khi viết mã rõ ràng, bạn nên tránh sử dụng ngữ cảnh trong hầu hết các trường hợp ...

Không sử dụng ngữ cảnh để chuyển dữ liệu mô hình của bạn qua các thành phần. Luồng dữ liệu của bạn thông qua cây một cách rõ ràng dễ hiểu hơn nhiều ...

Vì thế...

Redux khuyên bạn nên sử dụng tính năng React 'Context' thay vì truyền storexuống từng thành phần thông qua 'props'. Trong khi React khuyến nghị điều ngược lại.

Ngoài ra, có vẻ như Dan Abramov (người tạo ra Redux) hiện đang làm việc cho Facebook (người tạo ra React), chỉ làm tôi bối rối thêm.

• Tôi đang đọc tất cả những điều này đúng không ..?
• Sự đồng thuận chung hiện tại về vấn đề này là gì ..?

Ngữ cảnh là một tính năng nâng cao và có thể thay đổi. Trong một số trường hợp, tính tiện lợi của nó vượt trội hơn nhược điểm của nó nên một số thư viện như React Redux và React Router chọn dựa vào nó mặc dù bản chất thử nghiệm.

Phần quan trọng ở đây là các thư viện từ . Nếu ngữ cảnh thay đổi hành vi của nó, chúng tôi với tư cách là tác giả thư viện sẽ cần phải điều chỉnh . Tuy nhiên, miễn là thư viện không yêu cầu bạn trực tiếp sử dụng API ngữ cảnh, bạn với tư cách là người dùng không phải lo lắng về những thay đổi đối với nó.

React Redux sử dụng ngữ cảnh bên trong nhưng nó không tiết lộ sự thật này trong API công khai. Vì vậy, bạn sẽ cảm thấy an toàn hơn nhiều khi sử dụng ngữ cảnh thông qua React Redux so với trực tiếp bởi vì nếu nó thay đổi, gánh nặng cập nhật mã sẽ thuộc về React Redux chứ không phải bạn.

Cuối cùng thì React Redux vẫn hỗ trợ luôn chuyển cửa hàng làm chỗ dựa nên nếu bạn muốn tránh hoàn toàn ngữ cảnh, bạn có lựa chọn đó. Tuy nhiên, tôi sẽ nói điều này là không thực tế.

TLDR: Tránh sử dụng ngữ cảnh trực tiếp trừ khi bạn thực sự biết mình đang làm gì. Việc sử dụng một thư viện dựa trên ngữ cảnh nội bộ là tương đối an toàn.

Tôi không biết về những người khác, nhưng tôi thích sử dụng trình trang trí kết nối của react-redux để bọc các thành phần của mình để chỉ những đạo cụ từ cửa hàng mà tôi cần mới được chuyển vào thành phần của tôi. Điều này biện minh cho việc sử dụng ngữ cảnh theo một nghĩa nào đó bởi vì tôi không sử dụng nó (và tôi biết, theo quy luật, bất kỳ mã nào mà tôi phụ trách sẽ không sử dụng nó).

Khi tôi kiểm tra các thành phần của mình, tôi kiểm tra thành phần không được bọc. Bởi vì react-redux chỉ vượt qua các đạo cụ tôi cần trên thành phần đó, nên bây giờ tôi biết chính xác những đạo cụ tôi cần khi viết bài kiểm tra.

Tôi cho rằng vấn đề là, tôi không bao giờ nhìn thấy ngữ cảnh từ trong mã của mình, tôi không sử dụng nó, vì vậy ở một mức độ nhất định, nó không ảnh hưởng đến tôi! Điều này không nói lên bất cứ điều gì về cảnh báo "thử nghiệm" của Facebook .. Nếu ngữ cảnh biến mất, tôi cũng sẽ lo lắng như những người khác cho đến khi Redux được cập nhật.

Có một mô-đun npm giúp bạn thực sự dễ dàng thêm redux vào bối cảnh phản ứng

https://github.com/jamrizzi/redux-context-provider

https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}