Top những câu hỏi phỏng vấn React thường gặp - Phần 7

Top những câu hỏi phỏng vấn React thường gặp - Phần 7

thumbnail

Tiếp tục chuỗi bài viết về Top những câu hỏi phỏng vấn React thường gặp, đây sẽ là phần 7. 

Bây giờ hãy bắt đầu nào!

1. Redux Thumk là gì?

Redux Thunk middleware cho phép bạn viết các action creators trả về một hàm thay vì một action. Thunk có thể được sử dụng để trì hoãn việc gửi một hành động hoặc chỉ dispatch nếu một điều kiện nhất định được đáp ứng. Hàm bên trong nhận các phương thức lưu trữ dispatch()getState() làm tham số.

2. Sự khác nhau giữa redux-saga và redux-thunk?

Cả Redux Thunk và Redux Saga đều xử lý các tác dụng phụ. Trong hầu hết các tình huống, Thunk sử dụng Promises để giải quyết chúng, trong khi Saga sử dụng Generators. Thunk dễ sử dụng và Promise quen thuộc với nhiều nhà phát triển, Sagas/Generators mạnh hơn nhưng bạn sẽ cần tìm hiểu chúng. Nhưng cả hai middleware có thể cùng tồn tại, vì vậy bạn có thể bắt đầu với Thunks và giới thiệu Sagas khi/nếu bạn cần chúng.

3. Redux DevTools là gì?

Redux DevTools là môi trường du hành thời gian chỉnh sửa trực tiếp dành cho Redux với tính năng hot reloading, phát lại hành động và giao diện người dùng có thể tùy chỉnh. Nếu bạn không muốn bận tâm đến việc cài đặt Redux DevTools và tích hợp nó vào dự án của mình, hãy cân nhắc sử dụng Redux DevTools Extension cho Chrome và Firefox.

4. Các tính năng của Redux DevTools là gì?


Dưới đây là một số tính năng chính của Redux DevTools,
  • Cho phép bạn kiểm tra mọi state và action payload.
  • Cho phép bạn quay ngược thời gian bằng cách cancelling actions.
  • Nếu bạn thay đổi reducer code, mỗi hành động theo giai đoạn sẽ được đánh giá lại.
  • Nếu reducers throw, bạn sẽ thấy điều này đã xảy ra trong hành động nào và lỗi là gì.
  • Với công cụ cải thiện lưu persistState(), bạn có thể duy trì các phiên gỡ lỗi trong các lần tải lại trang.

5. Redux selectors là gì và tại sao nên sử dụng chúng?

Selectors là các hàm lấy trạng thái Redux làm đối số và trả về một số dữ liệu để chuyển đến components.

Ví dụ: để lấy chi tiết người dùng từ trạng thái:

const getUserData = (state) => state.user.data;

Selectors này có hai lợi ích chính,
  • Selectors có thể tính toán dữ liệu dẫn xuất, cho phép Redux lưu trữ trạng thái tối thiểu có thể.
  • Selectors không được tính toán lại trừ khi một trong các đối số của nó thay đổi.

6. React Form là gì?

Redux Form hoạt động với React và Redux để cho phép một form trong React sử dụng Redux để lưu trữ tất cả trạng thái của nó. Redux Form có thể được sử dụng với các đầu vào HTML5 thô, nhưng nó cũng hoạt động rất tốt với các UI frameworks phổ biến như Material UI, React Widget và React Bootstrap.

7. Các tính năng chính của Redux Form là gì?

Một số tính năng chính của Redux Form là:
  • Field values tồn tại qua Redux store.
  • Redux store (đồng bộ hóa/không đồng bộ) và submission.
  • Định dạng, phân tích cú pháp và chuẩn hóa các field values.

8. Làm thế nào để add multiple middlewares vào Redux?

Bạn có thể sử dụng applyMiddleware().

Ví dụ: bạn có thể thêm redux-thunklogger chuyển chúng làm đối số cho applyMiddleware():

import { createStore, applyMiddleware } from "redux";
const createStoreWithMiddleware = applyMiddleware(
  ReduxThunk,
  logger
)(createStore);

9. Cách set initial state trong Redux?

Bạn cần chuyển trạng thái ban đầu làm đối số thứ hai cho createStore:

const rootReducer = combineReducers({
  todos: todos,
  visibilityFilter: visibilityFilter,
});

const initialState = {
  todos: [{ id: 123, name: "example", completed: false }],
};

const store = createStore(rootReducer, initialState);

10. Relay khác với Redux như thế nào?

Relay tương tự như Redux ở chỗ cả hai đều sử dụng một single store. Sự khác biệt chính là relay chỉ quản lý trạng thái bắt nguồn từ máy chủ và tất cả quyền truy cập vào trạng thái được sử dụng thông qua truy vấn GraphQL (để đọc dữ liệu) và đột biến (để thay đổi dữ liệu). Relay lưu trữ dữ liệu vào bộ nhớ cache cho bạn và tối ưu hóa việc tìm nạp dữ liệu cho bạn, bằng cách chỉ tìm nạp dữ liệu đã thay đổi và không có gì khác.

11. Một action trong Redux là gì?

Các actions là các đối tượng JavaScript đơn giản hoặc payloads thông tin gửi dữ liệu từ ứng dụng của bạn đến store của bạn. Họ là nguồn thông tin duy nhất cho store. Các actions phải có thuộc tính loại cho biết loại actions đang được thực hiện.

Ví dụ: hãy thực hiện một actions đại diện cho việc thêm một mục việc cần làm mới:

{
  type: ADD_TODO,
  text: 'Add todo item'
}

Kết luận

Vậy là mình đã tổng hợp thêm một số câu hỏi thường gặp khi phỏng vấn React ở phần 6 này. Mình sẽ tiếp tục thu thập nhiều hơn các câu hỏi và chia sẽ đến với mọi người. Các bạn hãy theo dõi Trang để không bỏ lỡ các bài viết tiếp theo nhé. 

No comments:

Powered by Blogger.