Cài đặt Redux và RTK trong ứng dụng React

Trong bài học này, chúng ta sẽ cài đặt vào ứng dụng của mình gói React-Redux, cho phép các thành phần React làm việc cùng với Redux và công cụ Redux Toolkit (viết tắt là RTK).

Hãy mở dự án của chúng ta và nhập vào terminal lệnh sau:

npm install @reduxjs/toolkit react-redux

Bây giờ chúng ta cần tạo kho lưu trữ store, nơi sẽ lưu trữ trạng thái toàn cục của ứng dụng. Đầu tiên, trong thư mục src chúng ta sẽ tạo thư mục app, và trong đó tạo file store.js. Sau đó, trong file này chúng ta cần import configureStore từ RTK:

import { configureStore } from '@reduxjs/toolkit'

Tiếp theo, tạo một store rỗng và truyền vào ít nhất một reducer:

export default configureStore({
	reducer: {}
});

Để các thành phần React của chúng ta có thể làm việc với store, chúng ta sẽ thực hiện như sau. Hãy vào file main.jsx của chúng ta, trong đó đã có sẵn code:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

Trong phần import, thêm các dòng với store đã tạo ở bước trước và thành phần Provider:

import store from './app/store'
import { Provider } from 'react-redux'

Sau đó, bọc thành phần chính App của chúng ta trong Provider, và truyền cho nó store dưới dạng prop:

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

Và cuối cùng, trong thành phần React chính App, đặt code sau:

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

Chạy lại dự án của chúng ta và nhìn thấy trong cửa sổ trình duyệt: 'This is my first Redux app!'. Đừng chú ý đến cảnh báo về việc thiếu một reducer hợp lệ vào lúc này. Bạn đã làm được tất cả, chúc mừng :).

Hãy cài đặt Redux và RTK trong ứng dụng của bạn, như đã mô tả trong bài học. Đảm bảo rằng ứng dụng của bạn hoạt động.