Chuẩn bị

Trước khi bắt đầu kết nối Redux vào các React Component, bạn cần phải set up Redux sẵn sàng cho ứng dụng của mình. Đối với mỗi React Component, ta có thể nhận dữ liệu từ store, hoặc yêu cầu store cập nhật dữ liệu (cập nhật application state)

Truyền dữ liệu từ Redux Store vào React Component

Để truyền dữ liệu vào React Component, ta thực hiện hai bước:

  1. Tạo function mapStateToProps(), để chọn các mục dữ liệu cần thiết từ store và truyền vào component
  2. dùng HOC (Higher Order Component) connect() từ thư viện react-redux để kết nối component vào redux store

Giả sử Redux store của chúng ta có dạng như hình bên dưới.

Trong một component bất kỳ, bạn tạo method mapStateToProps như sau:

const mapStateToProps = (state) => ({
  currentPlaylist: state.playlistData.currentPlaylist,
  allPlaylists: state.playlistData.allPlaylist
})

Sau đó, ta sẽ dùng connect() để kết nối component của chúng ta vào redux như sau:

import {connect} from "react-redux";

...

export default connect(mapStateToProps)(Home)

Lưu ý, ta sẽ export component đã được kết nối vào Redux (như code trên), thay vì chỉ export component của mình (Home). Sau khi kết nối, currentPlaylist và allPlaylists sẽ được truyền vào props của component được kết nối. Ta có thể dùng console.log(props.currentPlaylist) để kiểm tra.

Dispatch Action để cập nhật dữ liệu trong Store

Để cập nhật dữ liệu trên store, ta cần dispatch các action, kèm theo payload chứa dữ liệu cần cập nhật lên store. Trước hết, ta cần một dispatcher. Dispatcher có thể lấy từ React Hook useDispatch từ react-redux:

import {connect, useDispatch} from "react-redux";

...

function Home(props) {
    const dispatch = useDispatch()

...

Sau đó, ta import các action được tạo từ ./redux/playlistDataSlice.js là setCurrentPlaylist hoặc setAllPlaylists để dùng với dispatch như sau:

import {setCurrentPlaylist} from "../redux/playlistDataSlice";

...

const myFirstPlaylist = {
  name: "My First Playlist"
}

dispatch(setCurrentPlaylist({currentPlaylist: myFirstPlaylist}))

Cạc bạn lưu ý payload được truyền vào setCurrentPlaylist cần phải khớp với payload khi khai báo method này trong ./redux/playlistDataSlice.js nhé. Sau khi dispatch setCurrentPlaylist, store sẽ được cập nhật, bạn có thể kiểm tra bằng console.log():

console.log(props.currentPlaylist.name)

// Kết quả: {name: "My First Playlist"}

Như vậy, bạn đã biết cách kết nối React Component vào Redux để đọc dữ liệu và cập nhật dữ liệu trên store. Bạn có thể tạo thêm nhiều slices khác tuỳ vào yêu cầu của ứng dụng, để chia nhỏ store ra thành nhiều phần khác nhau để dễ dàng quản lý hơn.