Redux là một thư viện quản lý trạng thái được sử dụng phổ biến trong các ứng dụng web front-end, đặc biệt là khi làm việc với React. Redux cung cấp một cách tiếp cận đơn giản để quản lý trạng thái của ứng dụng, giúp cho việc phát triển ứng dụng trở nên dễ dàng hơn và tăng tính khả maintainability của code. Với Redux, tất cả các thành phần của ứng dụng đều sử dụng chung một trạng thái, điều này giúp cho việc quản lý và cập nhật trạng thái trở nên dễ dàng hơn.
Redux thường và Redux toolkit nên chọn cái nào?
Việc chọn Redux thuần hay Redux Toolkit phụ thuộc vào yêu cầu và tình hình thực tế của dự án. Tuy nhiên, Redux Toolkit đã được ra mắt với mục đích đơn giản hóa quá trình sử dụng Redux và giảm thiểu số lượng boilerplate code. Nó cung cấp một số tính năng mạnh mẽ như configureStore, createSlice, createAsyncThunk, createEntityAdapter, … giúp cho việc xây dựng ứng dụng trở nên đơn giản và dễ dàng hơn.
Vì vậy, nếu bạn mới bắt đầu với Redux hoặc muốn sử dụng Redux trong dự án mới, thì Redux Toolkit là một lựa chọn tốt. Tuy nhiên, nếu bạn đã sử dụng Redux trong dự án hiện tại và muốn tiếp tục sử dụng nó, thì không có lý do gì phải chuyển sang Redux Toolkit nếu bạn đã quen thuộc với Redux thuần.
Vì vậy, nếu bạn mới bắt đầu với Redux hoặc muốn sử dụng Redux trong dự án mới, thì Redux Toolkit là một lựa chọn tốt. Tuy nhiên, nếu bạn đã sử dụng Redux trong dự án hiện tại và muốn tiếp tục sử dụng nó, thì không có lý do gì phải chuyển sang Redux Toolkit nếu bạn đã quen thuộc với Redux thuần.
Ví dụ về Redux thường và Redux toolkit
Dưới đây là ví dụ về cách sử dụng Redux thuần và Redux Toolkit để quản lý trạng thái của một ứng dụng đơn giản.
Ví dụ về Redux thuần:
// actions.js
export const INCREMENT_COUNTER = 'INCREMENT_COUNTER';
export const DECREMENT_COUNTER = 'DECREMENT_COUNTER';
export <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> incrementCounter() {
return {
type: INCREMENT_COUNTER
};
}
export function decrementCounter() {
return {
type: DECREMENT_COUNTER
};
}
// reducer.js
import { INCREMENT_COUNTER, DECREMENT_COUNTER } from './actions';
const initialState = {
counter: 0
};
function reducer(state = initialState, action) {
switch(action.type) {
case INCREMENT_COUNTER:
return {
...state,
counter: state.counter + 1
};
case DECREMENT_COUNTER:
return {
...state,
counter: state.counter - 1
};
default:
return state;
}
}
// store.js
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
Trong ví dụ trên, chúng ta định nghĩa hai actions là INCREMENT_COUNTER và DECREMENT_COUNTER, mỗi action trả về một object chứa type. Sau đó, chúng ta định nghĩa reducer với initialState là một object chứa một trường counter có giá trị ban đầu là 0. Reducer nhận vào state và action, và trả về một state mới dựa trên action đó. Cuối cùng, chúng ta tạo store từ reducer bằng hàm createStore của Redux.
Ví dụ về Redux Toolkit:
// slice.js
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
}
}
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './slice';
const store = configureStore({
reducer: {
counter: counterReducer
}
});
export default store;
Trong ví dụ trên, chúng ta sử dụng createSlice của Redux Toolkit để tạo một slice chứa initialState và reducers. Hàm createSlice sẽ tự động tạo ra các actions tương ứng với reducers. Sau đó, chúng ta tạo store bằng hàm configureStore của Redux Toolkit và truyền vào reducers được tạo từ createSlice.
Kết luận và bài viết có liên quan
Bài viết có liên quan : Tìm hiểu về Router trong Nest JsTìm hiểu về classComponent trong React JsTìm hiểu về memo trong React Js Tim hiểu về function component trong React Js
