Core Concepts - React with Redux

Mở đầu

• Bài viết nhằm mục đích chia sẻ và hệ thống lại kiến thức về React & Redux.
• Bài viết không hướng đến các bạn còn mới toanh về React & Redux.
• Bài viết chỉ đưa ra khái niệm, flow... không có example code.

Các khái niệm chính

Redux flow

Redux luôn luôn có một store.

1. Bất cứ khi nào bạn muốn thay thế state trong store, bạn sẽ dispatch một action.
2. Action sẽ bị catch bởi một hoặc nhiều reducer.
3. Reducer tạo ra các new state kết hợp với old state, và gửi đi những action khác - nếu có (dispatch actions).
4. Store nhận thông báo có state mới.

Example code các bạn có thể tracking trên trang chủ Redux. https://redux.js.org/basics/example-todo-list

Vai trò của components, containers, actions, action creators, store trong redux

• Store - Giữ state (new state & old state). State được cập nhật bởi một action được gửi đi thông qua dispatch đến middleware đến reducer và cuối cùng store nhận vào state mới.
• Components - Không ý thức trực tiếp về sự thay đổi của state. Chúng còn được gọi với cái tên presentational components.
• Containers - Là một phần của View. Nó ý thức trực tiếp đến sự thay đổi của state sử dụng react-redux, được biết đến với cái tên smart components và higher order components.
• Actions - Là một Object mang theo hai đặc trưng chính là type và payload.
• Action Creators - Người tạo ra những action, nó trả về một function thay vì là một object.

Lưu ý, phân biệt smart components với dumb components là một cách để tổ chức ứng dụng.

Phân biệt redux, react-redux, redux-thunk

• redux - Một thư viện dùng để quản lí state, có thể sử dụng trong nhiều môi trường: React, Angular, Vanilla...
• react-redux - Kết nối Redux Store với React Components. Tạo ra những smart components - lắng nghe những thay đổi của state, chuẩn bị props cho các presentational components và render.
• redux-thunk - Là một middleware cho phép viết action creators (return một function thay vì là một action hay object). Thunk có thể được sử dụng để làm trì hoãn việc dispatch một action hoặc chỉ dispatch action khi điều kiện nào đó được đáp ứng. Được sử dụng chủ yếu để tương tác với API.

Redux tutorials

• Redux official docs

• Getting Started with Redux

• Building React Applications with Idiomatic Redux

• Presentational and Container Components

Trên đây là những khái niệm cũng như từ khóa rất phổ biến trong các ứng dụng React & Redux. Hi vọng, bài viết giúp ích được các bạn. Chúc các bạn học tốt.