การติดตั้ง Redux และ RTK ในแอปพลิเคชัน React

ในบทเรียนนี้เราจะติดตั้งแพ็คเกจ React-Redux ลงในแอปพลิเคชันของเรา ซึ่งจะทำให้คอมโพเนนต์ React ทำงานร่วมกับ Redux และเครื่องมือ Redux Toolkit (เรียกย่อว่า RTK)

เปิดโปรเจคของเราและพิมพ์คำสั่งต่อไปนี้ในเทอร์มินัล:

npm install @reduxjs/toolkit react-redux

ตอนนี้เราจำเป็นต้องสร้าง store เพื่อเก็บสถานะส่วนกลางของแอพพลิเคชันของเรา เริ่มต้นด้วยการสร้างโฟลเดอร์ src และสร้างไฟล์ store.js ไว้ในนั้น จากนั้นในไฟล์นี้เราจำเป็นต้อง import configureStore จาก RTK:

import { configureStore } from '@reduxjs/toolkit'

จากนั้นสร้าง store ว่างและส่ง reducer อย่างน้อยหนึ่งตัว:

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

เพื่อให้คอมโพเนนต์ React ของเราสามารถ ทำงานกับ store ได้ เราจะทำดังต่อไปนี้ ไปที่ไฟล์ main.jsx ของเรา ซึ่งมีโค้ดอยู่แล้ว:

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>,
)

ในส่วน import ให้เพิ่มบรรทัดด้วย store ที่สร้างขึ้นในขั้นตอนก่อนหน้าและคอมโพเนนต์ Provider:

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

จากนั้นห่อหุ้มคอมโพเนนต์หลัก App ของเรา ด้วย Provider และส่ง store ให้เป็นพร็อพ:

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

และสุดท้าย ในคอมโพเนนต์ React หลัก App ให้วางโค้ดต่อไปนี้:

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

export default App

เริ่มต้นโปรเจคของเราอีกครั้งและคุณจะเห็น ในหน้าต่างเบราว์เซอร์: 'This is my first Redux app!' อย่าเพิ่งสนใจคำเตือนเกี่ยวกับการไม่มี reducer ที่ถูกต้องในตอนนี้ คุณทำสำเร็จแล้ว ยินดีด้วย :)

ติดตั้ง Redux และ RTK ในแอปพลิเคชันของคุณ ตามที่อธิบายไว้ในบทเรียน ตรวจสอบให้แน่ใจว่า แอปพลิเคชันของคุณทำงานได้