React Redux initialState vs defaultProps

Question

Tôi đang tìm các phương pháp tốt nhất để xác định các đạo cụ mặc định cho Container (thành phần thông minh được kết nối với kho lưu trữ Redux), và tôi phát hiện ra rằng có ít nhất hai cách tiếp cận như thế nào.

1. Để sử dụng initialState trong giảm tốc của tôi:

const initialState = { 
    name: 'John' 
}; 

export default function userState (state = initialState, action) {...} 

2. Để sử dụng defaultProps

User.defaultProps = { 
    name:'John' 
}; 

Đó là một trong tốt nhất và tại sao?

Answer 1

Điều quan trọng nhất là duy trì tính nhất quán trong suốt dự án của bạn.

Tôi nghĩ cách tiếp cận đầu tiên có lợi thế hoặc lưu trữ mọi thứ liên quan đến cửa hàng trong một tệp. Trình giảm số userState của bạn là nơi ai đó sẽ đến và tìm hiểu cách cập nhật dựa trên loại hành động. Có vẻ công bằng khi đến đó để xem nó được bắt đầu như thế nào.

Answer 2

Bạn nên sử dụng trạng thái ban đầu. Khái niệm đằng sau redux và mọi thư viện khác quản lý trạng thái ứng dụng là sự tách biệt nghiêm ngặt dữ liệu/mô hình và khung nhìn. Những khái niệm này giúp bạn dễ dàng hơn để giải thích về mã của mình, sử dụng lại lượt xem và kiểm tra cả hai cách độc lập.

Nếu bạn đang sử dụng Redux, tôi khuyên bạn nên quản lý dữ liệu của bạn (và dữ liệu mặc định của bạn) bên trong Redux.

Ví dụ về trường hợp thử nghiệm tách:

test('state test', t => { 
    t.deepEqual(userState(undefined, { type: '@@INIT' }), { name: 'John' }); 
    t.deepEqual(
     userState({ name: 'John' }, { type: 'SET NAME', name: 'Isa' }), 
     { name: 'Isa' } 
    ); 
}); 

test('view test', t => { 
    t.true(render(<User name="John" />).text().includes('John')); 
}); 

Answer 3

Tôi nghĩ rằng bạn hiểu lầm hai khái niệm khác nhau.

Đạo cụ trong các thùng chứa/thành phần chỉ là một cách để nói thành phần trông như thế nào hoặc xử lý một số sự kiện. Nhưng các đạo cụ mặc định không được chứa logic nghiệp vụ và dữ liệu doanh nghiệp được chia sẻ, như userInformation.

Nếu bạn có dữ liệu như userInformation, điều này không chỉ quan trọng đối với vùng chứa Người dùng, mà còn có thể hữu ích cho các thành phần khác, chỉ lưu trữ thông tin đó trong cửa hàng.

Answer 4

Giải thích này đã giúp tôi thực sự nhận được sự khác biệt giữa props và state, vì vậy tôi sẽ để nguyên điều này tại đây.

Dan Abramov, tác giả của Redux, đặt nó theo cách này trên Twitter, nếu tôi nhớ chính xác:

Tôi có nên sử dụng trạng thái thành phần để lưu trữ X?

• Nếu tôi có thể tính toán X từ đạo cụ -> số
• Nếu tôi không sử dụng X trong Phương thức render -> số
• khác -> Có.

Dan đang nói về trạng thái thành phần ở đây, thay vì defaultProps, nhưng nguyên tắc trong trường hợp này là như nhau.

Điểm của Redux là có một nguồn chân lý duy nhất cho trạng thái đơn đăng ký của bạn. Vì vậy, trong ví dụ của bạn, bạn sẽ muốn lưu trữ các giá trị mặc định của bạn (như name: John) trong cửa hàng Redux. Đạo cụ luôn được chuyển từ cửa hàng, nhưng nếu bạn chỉ định defaultProps, thì bạn đang lưu trữ trạng thái ứng dụng bên ngoài cửa hàng; nó sẽ không được quản lý bởi bộ giảm tốc của bạn.