100 câu hỏi phỏng vấn kinh điển về Redux có lời giải chi tiết A-Z

Dưới đây là danh sách các câu hỏi phỏng vấn về Redux, từ cơ bản đến chuyên sâu, kèm theo phân tích chi tiết từng dòng lệnh và giải thích. Những câu hỏi này phù hợp với vị trí React Native Developer.

Table of Contents

1. Redux là gì? Tại sao sử dụng Redux trong React Native?

  • Câu trả lời: Redux là một thư viện JavaScript quản lý state (trạng thái) của ứng dụng. Redux được sử dụng để đảm bảo state của ứng dụng được quản lý một cách nhất quán, dễ dàng kiểm soát và mở rộng. Redux rất hữu ích trong các ứng dụng lớn khi có nhiều component chia sẻ state.

2. Giải thích 3 nguyên tắc cơ bản của Redux

  • Câu trả lời:
    1. Single Source of Truth: Toàn bộ state của ứng dụng được lưu trữ trong một store duy nhất.
    2. State is Read-Only: State chỉ có thể thay đổi thông qua một action.
    3. Changes are made with Pure Functions: Reducers là pure functions đảm bảo tính bất biến của state.

3. Câu hỏi thực hành: Tạo một Redux store và quản lý state cơ bản

  • Yêu cầu: Tạo một Redux store để quản lý counter với các action: tăng, giảm, và reset.
  • Code và phân tích:
// 1. Import các thư viện cần thiết
import { createStore } from 'redux';
// 2. Định nghĩa state ban đầu
const initialState = {
count: 0,
};
// 3. Tạo reducer
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
case 'RESET':
return { ...state, count: 0 };
default:
return state;
}
};
// 4. Tạo store
const store = createStore(counterReducer);
// 5. Lắng nghe thay đổi của state
store.subscribe(() => {
console.log('State Updated:', store.getState());
});
// 6. Dispatch các action
store.dispatch({ type: 'INCREMENT' }); // +1
store.dispatch({ type: 'INCREMENT' }); // +1
store.dispatch({ type: 'DECREMENT' }); // -1
store.dispatch({ type: 'RESET' });     // Reset về 0

Giải thích từng dòng lệnh:

  1. import { createStore } from 'redux';
    • Import phương thức createStore để tạo Redux store.
  2. const initialState = { count: 0 };
    • Định nghĩa state ban đầu của ứng dụng.
  3. const counterReducer = (state = initialState, action) => {...}
    • Tạo reducer, là hàm nhận state và action, trả về state mới dựa trên action.
  4. const store = createStore(counterReducer);
    • Tạo store từ reducer.
  5. store.subscribe(() => {...});
    • Đăng ký một callback để lắng nghe mọi thay đổi state.
  6. store.dispatch({ type: 'INCREMENT' });
    • Gửi một action để yêu cầu thay đổi state. Action phải có type.

4. Middleware trong Redux là gì?

  • Câu trả lời: Middleware là các hàm trung gian được sử dụng trong Redux để can thiệp vào luồng xử lý action trước khi đến reducer.

5. Tích hợp Redux với React Native

  • Câu hỏi thực hành: Kết hợp Redux với React Native để quản lý counter.

Code và phân tích:

import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
import { createStore } from 'redux';
import { View, Text, Button } from 'react-native';
// Reducer
const counterReducer = (state = { count: 0 }, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};
// Store
const store = createStore(counterReducer);
// Counter Component
const Counter = () => {
const dispatch = useDispatch();
const count = useSelector((state) => state.count);
return (
<View style={{ padding: 20 }}>
<Text style={{ fontSize: 20 }}>Count: {count}</Text>
<Button title="Increment" onPress={() => dispatch({ type: 'INCREMENT' })} />
<Button title="Decrement" onPress={() => dispatch({ type: 'DECREMENT' })} />
</View>
);
};
// App Component
const App = () => {
return (
<Provider store={store}>
<Counter />
</Provider>
);
};
export default App;

Giải thích từng phần:

  1. Provider
    • Kết nối Redux store với ứng dụng React Native.
  2. useDispatch và useSelector
    • useDispatch: Gửi action để thay đổi state.
    • useSelector: Lấy state từ store.
  3. Component Counter
    • Hiển thị state count và cung cấp các nút để thay đổi state.

6. Câu hỏi chuyên sâu: Redux Toolkit

  • Redux Toolkit giúp đơn giản hóa việc sử dụng Redux. Hãy tạo store sử dụng Redux Toolkit.
import { configureStore, createSlice } from '@reduxjs/toolkit';
// Slice
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: (state) => { state.count += 1; },
decrement: (state) => { state.count -= 1; },
reset: (state) => { state.count = 0; },
},
});
// Export actions
export const { increment, decrement, reset } = counterSlice.actions;
// Store
const store = configureStore({
reducer: counterSlice.reducer,
});
// Dispatch example
store.dispatch(increment());
store.dispatch(decrement());
store.dispatch(reset());
console.log(store.getState());

Giải thích:

  1. createSlice
    • Tạo reducer và action trong cùng một nơi.
  2. configureStore
    • Tích hợp Redux Toolkit để tạo store dễ dàng hơn.

7. Redux Thunk và Redux Saga là gì? So sánh hai middleware này?

Redux Thunk

  • Khái niệm: Middleware cho phép bạn viết các action creator trả về một hàm thay vì một object. Thường được sử dụng để xử lý logic bất đồng bộ như gọi API.
  • Cách sử dụng cơ bản:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
// Reducer
const initialState = { data: [], loading: false, error: null };
const dataReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_START':
return { ...state, loading: true };
case 'FETCH_SUCCESS':
return { ...state, loading: false, data: action.payload };
case 'FETCH_ERROR':
return { ...state, loading: false, error: action.error };
default:
return state;
}
};
// Async Action
const fetchData = () => {
return async (dispatch) => {
dispatch({ type: 'FETCH_START' });
try {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
dispatch({ type: 'FETCH_SUCCESS', payload: data });
} catch (error) {
dispatch({ type: 'FETCH_ERROR', error: error.message });
}
};
};
// Store
const store = createStore(dataReducer, applyMiddleware(thunk));
// Trigger async action
store.dispatch(fetchData());

Redux Saga

  • Khái niệm: Middleware sử dụng generator functions để quản lý các tác vụ bất đồng bộ. Redux Saga cung cấp cách tiếp cận declarative (khai báo) hơn.
  • Cách sử dụng cơ bản:
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { takeLatest, call, put } from 'redux-saga/effects';
// Reducer
const initialState = { data: [], loading: false, error: null };
const dataReducer = (state = initialState, action) => {
switch (action.type) {
case 'FETCH_START':
return { ...state, loading: true };
case 'FETCH_SUCCESS':
return { ...state, loading: false, data: action.payload };
case 'FETCH_ERROR':
return { ...state, loading: false, error: action.error };
default:
return state;
}
};
// Saga worker
function* fetchDataSaga() {
yield put({ type: 'FETCH_START' });
try {
const response = yield call(fetch, 'https://jsonplaceholder.typicode.com/posts');
const data = yield response.json();
yield put({ type: 'FETCH_SUCCESS', payload: data });
} catch (error) {
yield put({ type: 'FETCH_ERROR', error: error.message });
}
}
// Saga watcher
function* watchFetchData() {
yield takeLatest('FETCH_REQUEST', fetchDataSaga);
}
// Create saga middleware
const sagaMiddleware = createSagaMiddleware();
// Store
const store = createStore(dataReducer, applyMiddleware(sagaMiddleware));
// Run saga
sagaMiddleware.run(watchFetchData);
// Dispatch action
store.dispatch({ type: 'FETCH_REQUEST' });

So sánh Redux Thunk và Redux Saga

Tiêu chíRedux ThunkRedux Saga
Cách tiếp cậnImperative (mệnh lệnh)Declarative (khai báo)
Dễ họcDễ hơnKhó hơn (cần hiểu generator)
Xử lý phức tạpKhó mở rộng khi logic phức tạpTốt hơn cho các tác vụ phức tạp
APIDựa vào async/awaitCung cấp hiệu năng mạnh qua yield
Cộng đồngPhổ biến, dễ tiếp cậnĐược sử dụng trong các dự án lớn

8. Câu hỏi chuyên sâu về Redux Toolkit: Tạo Slice nhiều reducer

  • Yêu cầu: Tạo Redux slice quản lý state cho sản phẩm và giỏ hàng.

Code và phân tích:

import { configureStore, createSlice } from '@reduxjs/toolkit';
// Product Slice
const productSlice = createSlice({
name: 'products',
initialState: [],
reducers: {
addProduct: (state, action) => {
state.push(action.payload);
},
removeProduct: (state, action) => {
return state.filter(product => product.id !== action.payload);
},
},
});
// Cart Slice
const cartSlice = createSlice({
name: 'cart',
initialState: [],
reducers: {
addToCart: (state, action) => {
state.push(action.payload);
},
removeFromCart: (state, action) => {
return state.filter(item => item.id !== action.payload);
},
},
});
// Store
const store = configureStore({
reducer: {
products: productSlice.reducer,
cart: cartSlice.reducer,
},
});
// Export actions
export const { addProduct, removeProduct } = productSlice.actions;
export const { addToCart, removeFromCart } = cartSlice.actions;
// Dispatch example
store.dispatch(addProduct({ id: 1, name: 'Laptop' }));
store.dispatch(addToCart({ id: 1, name: 'Laptop' }));
console.log(store.getState());

Phân tích:

  1. createSlice
    • Tạo slice cho từng feature (products, cart).
  2. State nhiều reducer
    • Sử dụng configureStore để tích hợp nhiều slice.
  3. Quản lý logic
    • Reducer trong slice xử lý logic liên quan đến từng feature cụ thể.

9. Câu hỏi nâng cao: Redux DevTools

  • Redux DevTools là công cụ mạnh mẽ giúp debug và kiểm tra các hành động (action) và trạng thái (state) trong ứng dụng Redux.

Cách tích hợp:

import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: yourReducer,
devTools: process.env.NODE_ENV !== 'production', // Bật DevTools ở chế độ phát triển
});
export default store;
  • Câu hỏi: Tại sao nên sử dụng Redux DevTools?
    • Theo dõi state và các action được dispatch.
    • Time-travel debugging: Quay lại trạng thái trước đó.
    • Hiệu quả khi làm việc nhóm.

10. Câu hỏi về tối ưu hiệu năng Redux trong React Native

  • Cách tối ưu:
    1. Sử dụng memoization: Sử dụng reselect để tối ưu việc lấy dữ liệu từ store.
    2. Phân chia state hợp lý: Tránh lưu quá nhiều state toàn cục.
    3. Sử dụng lazy loading: Tải dữ liệu khi cần thiết.

Code sử dụng Reselect:

import { createSelector } from 'reselect';
// Selector cơ bản
const selectProducts = state => state.products;
// Selector với memoization
const selectExpensiveProducts = createSelector(
[selectProducts],
(products) => products.filter(product => product.price > 1000)
);
const expensiveProducts = selectExpensiveProducts(store.getState());
console.log(expensiveProducts);

11. Redux Persist: Làm thế nào để lưu trữ state trong local storage hoặc AsyncStorage?

Redux Persist là gì?

Redux Persist là một thư viện giúp lưu trữ state của Redux vào storage (như local storage, AsyncStorage) và khôi phục state khi ứng dụng được khởi động lại.

Cách tích hợp Redux Persist trong React Native

Code ví dụ:
import React from 'react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import { persistStore, persistReducer } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { View, Text, Button } from 'react-native';
import { createSlice } from '@reduxjs/toolkit';
// 1. Tạo slice
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: (state) => { state.count += 1; },
decrement: (state) => { state.count -= 1; },
},
});
export const { increment, decrement } = counterSlice.actions;
// 2. Cấu hình Redux Persist
const persistConfig = {
key: 'root',
storage: AsyncStorage, // Sử dụng AsyncStorage
};
const persistedReducer = persistReducer(persistConfig, counterSlice.reducer);
// 3. Tạo store
const store = configureStore({
reducer: persistedReducer,
});
const persistor = persistStore(store);
// 4. Component Counter
const Counter = () => {
const dispatch = store.dispatch;
const count = store.getState().count;
return (
<View style={{ padding: 20 }}>
<Text style={{ fontSize: 20 }}>Count: {count}</Text>
<Button title="Increment" onPress={() => dispatch(increment())} />
<Button title="Decrement" onPress={() => dispatch(decrement())} />
</View>
);
};
// 5. App Component
const App = () => {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Counter />
</PersistGate>
</Provider>
);
};
export default App;

Phân tích từng phần:

  1. redux-persist
    • Dùng persistReducer để cấu hình lưu trữ state.
    • Dùng persistStore để tạo một persistor.
  2. AsyncStorage
    • Được sử dụng trong React Native để lưu trữ dữ liệu trên thiết bị.
  3. PersistGate
    • Đảm bảo rằng UI chỉ hiển thị sau khi state được khôi phục.

12. Redux Selector là gì? Làm thế nào để sử dụng Reselect hiệu quả?

Selector là gì?

Selector là một hàm được sử dụng để truy xuất dữ liệu từ Redux store. Reselect cung cấp khả năng memoization, giúp tránh tính toán lại dữ liệu không cần thiết.

Cách sử dụng Reselect

Code ví dụ:
import { createSelector } from 'reselect';
// State cơ bản
const initialState = {
products: [
{ id: 1, name: 'Laptop', price: 1200 },
{ id: 2, name: 'Phone', price: 800 },
],
};
// Reducer
const productReducer = (state = initialState, action) => {
return state;
};
// Selector cơ bản
const selectProducts = (state) => state.products;
// Selector với memoization
const selectExpensiveProducts = createSelector(
[selectProducts],
(products) => products.filter((product) => product.price > 1000)
);
// Lấy dữ liệu từ state
const expensiveProducts = selectExpensiveProducts({
products: initialState.products,
});
console.log(expensiveProducts); // [{ id: 1, name: 'Laptop', price: 1200 }]

Phân tích:

  1. selectProducts
    • Hàm cơ bản trả về danh sách sản phẩm.
  2. selectExpensiveProducts
    • Memoized selector sử dụng createSelector để chỉ tính toán lại khi products thay đổi.

13. Cách tổ chức Redux trong dự án lớn?

Thách thức trong dự án lớn:

  • Quản lý state phức tạp.
  • Cấu trúc thư mục rõ ràng.
  • Tái sử dụng code hiệu quả.

Cấu trúc thư mục Redux gợi ý:

src/
├── store/
│   ├── index.js           // Cấu hình store
│   ├── rootReducer.js     // Kết hợp tất cả reducer
├── features/
│   ├── counter/
│   │   ├── counterSlice.js
│   │   ├── Counter.js
│   ├── products/
│   │   ├── productSlice.js
│   │   ├── ProductList.js

Mô tả:

  1. store/index.js
    • Khởi tạo store và tích hợp middleware.
  2. rootReducer.js
    • Kết hợp nhiều reducer.
  3. features/*
    • Chia từng tính năng (feature) thành các thư mục riêng.

14. Hỏi nâng cao: Làm thế nào để kết hợp Redux với WebSocket?

Câu trả lời:

Redux có thể kết hợp với WebSocket để quản lý các sự kiện thời gian thực. Middleware là cách tốt nhất để tích hợp.

Code ví dụ:
import { createStore, applyMiddleware } from 'redux';
// Reducer
const chatReducer = (state = { messages: [] }, action) => {
switch (action.type) {
case 'NEW_MESSAGE':
return { ...state, messages: [...state.messages, action.payload] };
default:
return state;
}
};
// WebSocket Middleware
const socketMiddleware = (wsUrl) => {
return (store) => {
const socket = new WebSocket(wsUrl);
socket.onmessage = (event) => {
const message = JSON.parse(event.data);
store.dispatch({ type: 'NEW_MESSAGE', payload: message });
};
return (next) => (action) => {
if (action.type === 'SEND_MESSAGE') {
socket.send(JSON.stringify(action.payload));
}
return next(action);
};
};
};
// Store
const store = createStore(chatReducer, applyMiddleware(socketMiddleware('ws://example.com')));
// Dispatch example
store.dispatch({ type: 'SEND_MESSAGE', payload: { content: 'Hello, World!' } });

Phân tích:

  1. WebSocket
    • Kết nối đến máy chủ WebSocket.
  2. Middleware
    • Xử lý giao tiếp giữa Redux và WebSocket.
  3. Action SEND_MESSAGE
    • Gửi dữ liệu từ client đến server.

15. Câu hỏi nâng cao: Làm thế nào để sử dụng Redux cho SSR (Server-Side Rendering)?

Câu trả lời:

Redux được sử dụng trong SSR để tạo trước state cho client.

Code cơ bản:
import { createStore } from 'redux';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { Provider } from 'react-redux';
// Reducer
const reducer = (state = { data: 'Server Side Data' }, action) => state;
// Store
const store = createStore(reducer);
// App Component
const App = () => (
<Provider store={store}>
<div>Redux SSR Example</div>
</Provider>
);
// Render trên server
const html = ReactDOMServer.renderToString(<App />);
console.log(html);

Phân tích:

  1. Redux Store
    • Tạo store và truyền cho Provider.
  2. ReactDOMServer
    • Render ứng dụng React thành HTML trên server.

16. Câu hỏi: Làm thế nào để quản lý state không cần Redux? Khi nào không nên dùng Redux?

Câu trả lời:

Bạn có thể quản lý state mà không cần Redux trong các trường hợp sau:

  1. Sử dụng Context API:
    • Khi ứng dụng có state không quá phức tạp hoặc số lượng state cần chia sẻ hạn chế.
Ví dụ Context API thay Redux:
import React, { createContext, useContext, useReducer } from 'react';
// Tạo Context
const CounterContext = createContext();
// Reducer
const counterReducer = (state, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
// Provider
const CounterProvider = ({ children }) => {
const [state, dispatch] = useReducer(counterReducer, { count: 0 });
return (
<CounterContext.Provider value={{ state, dispatch }}>
{children}
</CounterContext.Provider>
);
};
// Custom hook
const useCounter = () => useContext(CounterContext);
// Component sử dụng Context
const Counter = () => {
const { state, dispatch } = useCounter();
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
</div>
);
};
// App Component
const App = () => (
<CounterProvider>
<Counter />
</CounterProvider>
);
export default App;

Khi nào không nên dùng Redux?

  1. Ứng dụng nhỏ với ít state cần chia sẻ.
  2. Không có logic state phức tạp hoặc không cần quản lý bất đồng bộ.
  3. Dùng Context API hoặc state cục bộ đủ để giải quyết vấn đề.

17. Câu hỏi: So sánh Redux với Context API?

Tiêu chíReduxContext API
Phạm vi sử dụngQuản lý state phức tạp, bất đồng bộQuản lý state đơn giản, phạm vi nhỏ
MiddlewareCó thể sử dụng middleware như Thunk, SagaKhông hỗ trợ middleware
Hiệu năngTốt hơn trong ứng dụng lớn, tránh re-renderCó thể gây re-render không cần thiết
Cách sử dụngCần cài đặt thêm thư việnTích hợp sẵn trong React
Học tậpCần thời gian để họcDễ học hơn

18. Câu hỏi thực hành: Sử dụng Redux để quản lý danh sách TODO

Yêu cầu:

  • Quản lý danh sách TODO với các tính năng thêm, xóa, hoàn thành.
Code ví dụ:
import { createSlice, configureStore } from '@reduxjs/toolkit';
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
// Slice
const todoSlice = createSlice({
name: 'todos',
initialState: [],
reducers: {
addTodo: (state, action) => {
state.push({ id: Date.now(), text: action.payload, completed: false });
},
toggleTodo: (state, action) => {
const todo = state.find((todo) => todo.id === action.payload);
if (todo) todo.completed = !todo.completed;
},
deleteTodo: (state, action) => {
return state.filter((todo) => todo.id !== action.payload);
},
},
});
export const { addTodo, toggleTodo, deleteTodo } = todoSlice.actions;
// Store
const store = configureStore({
reducer: {
todos: todoSlice.reducer,
},
});
// Component
const TodoApp = () => {
const todos = useSelector((state) => state.todos);
const dispatch = useDispatch();
const [text, setText] = React.useState('');
const handleAddTodo = () => {
if (text.trim()) {
dispatch(addTodo(text));
setText('');
}
};
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)} placeholder="Add a todo" />
<button onClick={handleAddTodo}>Add</button>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
<span
onClick={() => dispatch(toggleTodo(todo.id))}
style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
>
{todo.text}
</span>
<button onClick={() => dispatch(deleteTodo(todo.id))}>Delete</button>
</li>
))}
</ul>
</div>
);
};
// App Component
const App = () => (
<Provider store={store}>
<TodoApp />
</Provider>
);
export default App;

Phân tích:

  1. addTodo
    • Thêm một TODO mới với text và id.
  2. toggleTodo
    • Đổi trạng thái hoàn thành của TODO.
  3. deleteTodo
    • Xóa TODO khỏi danh sách.

19. Câu hỏi: Làm thế nào để quản lý nhiều slice với Redux Toolkit?

Câu trả lời:

Redux Toolkit hỗ trợ quản lý nhiều slice bằng cách kết hợp chúng trong configureStore.

Code ví dụ:
import { configureStore, createSlice } from '@reduxjs/toolkit';
// Slice 1: User
const userSlice = createSlice({
name: 'user',
initialState: { name: 'Guest', isLoggedIn: false },
reducers: {
login: (state, action) => {
state.name = action.payload;
state.isLoggedIn = true;
},
logout: (state) => {
state.name = 'Guest';
state.isLoggedIn = false;
},
},
});
// Slice 2: Cart
const cartSlice = createSlice({
name: 'cart',
initialState: [],
reducers: {
addToCart: (state, action) => {
state.push(action.payload);
},
removeFromCart: (state, action) => {
return state.filter((item) => item.id !== action.payload);
},
},
});
// Store
const store = configureStore({
reducer: {
user: userSlice.reducer,
cart: cartSlice.reducer,
},
});
// Export actions
export const { login, logout } = userSlice.actions;
export const { addToCart, removeFromCart } = cartSlice.actions;
// Dispatch examples
store.dispatch(login('John Doe'));
store.dispatch(addToCart({ id: 1, name: 'Laptop' }));
console.log(store.getState());

Phân tích:

  1. Kết hợp nhiều slice
    • Mỗi slice chịu trách nhiệm quản lý một phần state.
  2. Tách biệt logic
    • Dễ dàng bảo trì và mở rộng state.

20. Câu hỏi: Làm thế nào để kiểm tra (test) Redux?

Câu trả lời:

Sử dụng thư viện như Jest để kiểm tra reducers, actions, và selectors.

Kiểm tra reducer:
import { createSlice } from '@reduxjs/toolkit';
// Slice
const counterSlice = createSlice({
name: 'counter',
initialState: { count: 0 },
reducers: {
increment: (state) => { state.count += 1; },
decrement: (state) => { state.count -= 1; },
},
});
const { reducer, actions } = counterSlice;
test('increment action', () => {
const initialState = { count: 0 };
const newState = reducer(initialState, actions.increment());
expect(newState.count).toBe(1);
});
test('decrement action', () => {
const initialState = { count: 1 };
const newState = reducer(initialState, actions.decrement());
expect(newState.count).toBe(0);
});

Phân tích:

  • Sử dụng Jest để kiểm tra reducer hoạt động đúng.
  • Mỗi action được kiểm tra với state ban đầu.

21. Câu hỏi: Làm thế nào để tích hợp Redux với TypeScript trong React Native?

Câu trả lời:

TypeScript giúp tăng tính an toàn khi làm việc với Redux bằng cách thêm các kiểu dữ liệu cho state, action, và reducers.

Cách tích hợp Redux với TypeScript

Code ví dụ:
import { configureStore, createSlice, PayloadAction } from '@reduxjs/toolkit';
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
// Định nghĩa kiểu dữ liệu cho state
interface CounterState {
count: number;
}
// State ban đầu
const initialState: CounterState = {
count: 0,
};
// Slice với TypeScript
const counterSlice = createSlice({
name: 'counter',
initialState,
reducers: {
increment: (state) => {
state.count += 1;
},
decrement: (state) => {
state.count -= 1;
},
incrementByAmount: (state, action: PayloadAction<number>) => {
state.count += action.payload;
},
},
});
// Xuất các action
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
// Tạo store
const store = configureStore({
reducer: {
counter: counterSlice.reducer,
},
});
// Định nghĩa RootState và AppDispatch
type RootState = ReturnType<typeof store.getState>;
type AppDispatch = typeof store.dispatch;
// Custom hooks cho TypeScript
const useAppDispatch = () => useDispatch<AppDispatch>();
const useAppSelector: <T>(selector: (state: RootState) => T) => T = useSelector;
// Component
const Counter: React.FC = () => {
const count = useAppSelector((state) => state.counter.count);
const dispatch = useAppDispatch();
return (
<div>
<p>Count: {count}</p>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
<button onClick={() => dispatch(incrementByAmount(5))}>Add 5</button>
</div>
);
};
// App Component
const App: React.FC = () => (
<Provider store={store}>
<Counter />
</Provider>
);
export default App;

Phân tích:

  1. Interface CounterState:
    • Định nghĩa kiểu dữ liệu cho state.
  2. PayloadAction:
    • Xác định kiểu dữ liệu cho action khi truyền tham số (ở đây là number).
  3. Custom hooks:
    • useAppSelector: Tự động nhận biết kiểu của state.
    • useAppDispatch: Xác định kiểu dữ liệu cho dispatch.

22. Câu hỏi: Làm thế nào để xử lý state bất đồng bộ với Redux Toolkit và TypeScript?

Cách triển khai bất đồng bộ với Redux Toolkit (Async Thunk)

Code ví dụ:
import { createSlice, configureStore, createAsyncThunk } from '@reduxjs/toolkit';
import React from 'react';
import { Provider, useSelector, useDispatch } from 'react-redux';
// Kiểu dữ liệu cho state
interface PostState {
posts: string[];
loading: boolean;
error: string | null;
}
// State ban đầu
const initialState: PostState = {
posts: [],
loading: false,
error: null,
};
// Async Thunk
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
const response = await fetch('https://jsonplaceholder.typicode.com/posts');
const data = await response.json();
return data.map((post: any) => post.title);
});
// Slice
const postSlice = createSlice({
name: 'posts',
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchPosts.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchPosts.fulfilled, (state, action) => {
state.loading = false;
state.posts = action.payload;
})
.addCase(fetchPosts.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message || 'Error fetching posts';
});
},
});
// Store
const store = configureStore({
reducer: {
posts: postSlice.reducer,
},
});
// Component
const PostList: React.FC = () => {
const { posts, loading, error } = useSelector((state: any) => state.posts);
const dispatch = useDispatch();
React.useEffect(() => {
dispatch(fetchPosts());
}, [dispatch]);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error}</p>;
return (
<ul>
{posts.map((post, index) => (
<li key={index}>{post}</li>
))}
</ul>
);
};
// App Component
const App: React.FC = () => (
<Provider store={store}>
<PostList />
</Provider>
);
export default App;

Phân tích:

  1. createAsyncThunk:
    • Tạo một hành động bất đồng bộ.
  2. extraReducers:
    • Lắng nghe các trạng thái của async thunk (pending, fulfilled, rejected).
  3. TypeScript:
    • Kiểm soát kiểu dữ liệu trả về từ API (string[] trong ví dụ này).

23. Câu hỏi: Làm thế nào để viết middleware tùy chỉnh trong Redux?

Cách viết middleware tùy chỉnh

Code ví dụ:
const loggerMiddleware = (store) => (next) => (action) => {
console.log('Dispatching:', action);
const result = next(action); // Gửi action đến reducer
console.log('Next State:', store.getState());
return result;
};
// Store với middleware
const store = createStore(
reducer,
applyMiddleware(loggerMiddleware)
);
// Dispatch action
store.dispatch({ type: 'TEST_ACTION' });

Phân tích:

  1. Middleware:
    • Một hàm nhận store, next, và action.
    • Có thể can thiệp vào luồng xử lý action trước khi đến reducer.
  2. Logger Middleware:
    • In log thông tin về action và state trước/sau khi dispatch.

24. Câu hỏi: Làm thế nào để kết hợp Redux với các thư viện khác (như React Query)?

Câu trả lời:

Redux có thể được kết hợp với các thư viện như React Query để quản lý các yêu cầu dữ liệu API phức tạp. React Query tập trung vào quản lý dữ liệu server-side, trong khi Redux chủ yếu dùng cho state client-side.

25. Câu hỏi: Làm thế nào để bảo trì và mở rộng state trong các dự án Redux lớn?

Câu trả lời:

  1. Phân chia slice rõ ràng:
    • Chia state thành các slice logic.
  2. Sử dụng Redux Toolkit:
    • Giảm boilerplate, tăng khả năng bảo trì.
  3. Tối ưu hiệu năng:
    • Sử dụng memoized selector (reselect).
  4. Quy chuẩn thư mục:
    • Giữ cấu trúc thư mục thống nhất.

26. Câu hỏi: Làm thế nào để quản lý phân quyền người dùng (authentication/authorization) với Redux?

Câu trả lời:

Bạn có thể sử dụng Redux để quản lý trạng thái đăng nhập, thông tin người dùng, và phân quyền. Thông thường, bạn sẽ có một slice quản lý thông tin người dùng và trạng thái đăng nhập.

Code ví dụ: Quản lý authentication với Redux

import { createSlice, configureStore } from '@reduxjs/toolkit';
import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
// Authentication Slice
const authSlice = createSlice({
name: 'auth',
initialState: { isLoggedIn: false, user: null },
reducers: {
login: (state, action) => {
state.isLoggedIn = true;
state.user = action.payload; // Thông tin người dùng
},
logout: (state) => {
state.isLoggedIn = false;
state.user = null;
},
},
});
export const { login, logout } = authSlice.actions;
// Store
const store = configureStore({
reducer: {
auth: authSlice.reducer,
},
});
// Login Component
const Login = () => {
const dispatch = useDispatch();
const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
const handleLogin = () => {
dispatch(login({ username: 'john_doe', role: 'admin' }));
};
const handleLogout = () => {
dispatch(logout());
};
return (
<div>
{isLoggedIn ? (
<>
<p>Welcome back!</p>
<button onClick={handleLogout}>Logout</button>
</>
) : (
<>
<p>Please log in.</p>
<button onClick={handleLogin}>Login</button>
</>
)}
</div>
);
};
// App Component
const App = () => (
<Provider store={store}>
<Login />
</Provider>
);
export default App;

Phân tích:

  1. Slice authSlice:
    • Quản lý trạng thái isLoggedIn và thông tin người dùng.
  2. Action login:
    • Cập nhật trạng thái isLoggedIn và lưu thông tin người dùng.
  3. Component Login:
    • Hiển thị giao diện đăng nhập hoặc trạng thái chào mừng.

27. Câu hỏi: Làm thế nào để tích hợp Redux với các thư viện xử lý biểu đồ trạng thái (state machine) như XState?

Câu trả lời:

Bạn có thể sử dụng XState để quản lý các trạng thái phức tạp (như các bước trong quy trình) và tích hợp nó với Redux để chia sẻ state với các phần khác của ứng dụng.

Code ví dụ: Tích hợp Redux với XState

import { createMachine, interpret } from 'xstate';
import { createSlice, configureStore } from '@reduxjs/toolkit';
import React from 'react';
import { Provider, useDispatch, useSelector } from 'react-redux';
// XState Machine
const toggleMachine = createMachine({
id: 'toggle',
initial: 'inactive',
states: {
inactive: {
on: { TOGGLE: 'active' },
},
active: {
on: { TOGGLE: 'inactive' },
},
},
});
// XState Service
const toggleService = interpret(toggleMachine).start();
// Slice
const toggleSlice = createSlice({
name: 'toggle',
initialState: toggleMachine.initialState.value,
reducers: {
toggle: (state) => {
const nextState = toggleService.send('TOGGLE').value;
return nextState;
},
},
});
export const { toggle } = toggleSlice.actions;
// Store
const store = configureStore({
reducer: {
toggle: toggleSlice.reducer,
},
});
// Component
const Toggle = () => {
const state = useSelector((state) => state.toggle);
const dispatch = useDispatch();
return (
<div>
<p>Current State: {state}</p>
<button onClick={() => dispatch(toggle())}>Toggle</button>
</div>
);
};
// App Component
const App = () => (
<Provider store={store}>
<Toggle />
</Provider>
);
export default App;

Phân tích:

  1. XState Machine:
    • Quản lý trạng thái phức tạp với biểu đồ trạng thái.
  2. Slice toggleSlice:
    • Kết nối XState với Redux bằng cách lưu trạng thái hiện tại.
  3. XState Service:
    • Sử dụng send để chuyển đổi trạng thái trong biểu đồ.

28. Câu hỏi: Làm thế nào để xử lý side effects phức tạp với Redux Toolkit?

Câu trả lời:

Redux Toolkit hỗ trợ createAsyncThunk để xử lý các tác vụ bất đồng bộ như gọi API. Đối với các side effects phức tạp hơn, bạn có thể kết hợp với middleware như Redux Saga hoặc Redux Observable.

Code ví dụ: Sử dụng Redux Saga để xử lý side effects phức tạp

import { createSlice, configureStore } from '@reduxjs/toolkit';
import createSagaMiddleware from 'redux-saga';
import { takeLatest, put, call } from 'redux-saga/effects';
// Slice
const userSlice = createSlice({
name: 'user',
initialState: { loading: false, user: null, error: null },
reducers: {
fetchUserStart: (state) => { state.loading = true; },
fetchUserSuccess: (state, action) => {
state.loading = false;
state.user = action.payload;
},
fetchUserFailure: (state, action) => {
state.loading = false;
state.error = action.payload;
},
},
});
export const { fetchUserStart, fetchUserSuccess, fetchUserFailure } = userSlice.actions;
// Saga
function* fetchUserSaga() {
try {
yield put(fetchUserStart());
const user = yield call(() =>
fetch('https://jsonplaceholder.typicode.com/users/1').then((res) => res.json())
);
yield put(fetchUserSuccess(user));
} catch (error) {
yield put(fetchUserFailure(error.message));
}
}
function* watchFetchUser() {
yield takeLatest('user/fetchUser', fetchUserSaga);
}
// Middleware
const sagaMiddleware = createSagaMiddleware();
// Store
const store = configureStore({
reducer: {
user: userSlice.reducer,
},
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware),
});
sagaMiddleware.run(watchFetchUser);
// Dispatch
store.dispatch({ type: 'user/fetchUser' });

Phân tích:

  1. Redux Saga:
    • Sử dụng call để thực hiện yêu cầu bất đồng bộ.
    • Lắng nghe action user/fetchUser với takeLatest.
  2. Side Effects phức tạp:
    • Xử lý các trạng thái như fetchUserStart, fetchUserSuccess, và fetchUserFailure.

Related Posts

Để lại một bình luận

100 câu hỏi phỏng vấn typescript kèm lời giải chi tiết từ A-Z

25/12/2024

100 câu hỏi phỏng vấn React Native level middle-senior kèm lời giải chi tiết từ A-Z

25/12/2024