Chuẩn bị

Trước khi bắt đầu setup Redux cho ứng dụng của mình, bạn cần phải tạo một ứng dụng mới với Next.js trên máy của mình. Bạn hãy kiểm tra lại, trước khi tiếp tục bài học này nhé.

Cài đặt các thư viện cần thiết

Cách nhanh nhất để setup Redux cho một ứng dụng Next.js là sử dụng thư viện “next-redux-wrapper”. Để cài đặt thư viện này, bạn cd vào thư mục chứa ứng dụng của mình trên terminal và chạy câu lệnh sau:

yarn add next-redux-wrapper react-redux @reduxjs/toolkit --save

Trong câu lệnh trên:

  • next-redux-wrapper là sẽ xử lý các setup phức tạp của Redux
  • react-redux là thư viện cần thiết để thích hợp Redux vào ứng dụng viết bằng React.js
  • @redux/toolkit là thư viên tổng hợp các API chính của redux như tạo action, reducer, v/v

Setup Redux

Bước tiếp theo, ta sẽ tạo Redux store cho ứng dụng. Trong thư mục gốc của ứng dụng, tạo một thư mục mới với tên redux. Thư mục này sẽ phần code để xử lý các tác vụ liên quan đến Redux.

Sau đó, bạn tạo file store.js trong thư mục ./redux mới vừa tạo. Sau khi tạo file, bạn sẽ có các thư mục như sau:

Trong file ./redux/store.js, bạn khởi tạo redux store với code như sau:

import { configureStore } from '@reduxjs/toolkit'

// import { createStore } from 'redux';
import {combineReducers, configureStore} from '@reduxjs/toolkit'

import { createWrapper } from 'next-redux-wrapper'


const store = configureStore({
    reducer: combineReducers({}),
    devTools: true,
})

export const makeStore = () => store

// export an assembled wrapper
export const wrapper = createWrapper(makeStore, { debug: true })

Sau đó, bạn vào file ./page._app.js và tiến hành kết nối redux store với ựng dụng của minh. Trước tiên, bạn import wrapper từ file ./redux/store.js vừa tạo trogn ./pages/_app.js:

// ./pages/_app.js

import {wrapper} from "../redux/store"

Sau đó, thay đổi câu lệnh export default trong ./pages/_app.js thành:

// ./pages/_app.js

export default wrapper.withRedux(MyApp)

Đến đây, ứng dụng của bạn đã được kết nối thành công với một Redux store rỗng rồi. Tiếp theo, ta cần phải tạo các Reducers để xử lý dữ liệu được lưu trên Redux store.

Tạo Reducer đầu tiên

Dữ liệu được lưu trong Redux dưới dạng Javascript Object với nhiều keys khác nhau. Trong ví dụ sau, Redux store của chúng ta chỉ có một key duy nhất là playlistData:

Mỗi một key như vậy sẽ được xử lý bằng một Reducer, và với Redux Toolkit việc tạo reducer đã dễ dàng hơn rất nhiều. Trong thư mục ./redux, bạn tạo file playlistDataSlice.js với nội dung như sau:

import { createAction } from "@reduxjs/toolkit";
import { HYDRATE } from "next-redux-wrapper";

const hydrate = createAction(HYDRATE)

const initialState = {
    currentPlaylist: null,
    allPlaylists: []
}

export const playlistData = createSlice({
    name: 'playlistData',

    initialState: initialState,

    reducers: {
    },

    extraReducers(builder) {
        builder.addCase(hydrate, (state) => {
            return {
                ...state,
            }
        })
    },
})

const { reducer } = playlistData

export default reducer

Đoạn code từ dòng 21 – 27 dùng để xử lý dữ liệu trong trường hợp bạn sử dụng các function “getStaticProps” hoặc “getInitialProps” của Next.js. Chúng ta sẽ có các bài học về các function này trong tương lai.

Hiện tại, ta chỉ ta chỉ có dữ liệu đầu vào của state platlistData (object initialState). Ta cần thêm một vài reducer nữa để xử lý state. Trong file ./redux/playlistDataSlice.js, bạn thêm một số method cho object reducers bên trong function createSlice:

    reducers: {
        setCurrentPlaylist(state, action) {
            state.currentPlaylist = action.payload.currentPlaylist
        },
        setAllPlaylists(state, action) {
            state.allPlaylists = action.payload.allPlaylists
        }
    },

Ta tạo thêm hai reducer cho playlistDataSlice:

  • setCurrentPlaylist: chọn playlist mà ta muốn xem
  • setAllPlaylists: lưu tất cả playlist ta có vào store.

Các ta có thể export các action để chạy hai reducer trên thông qua actions được cung cấp bởi Redux Toolkit như sau:

const { actions, reducer } = playlistData

export const {setAllPlaylists, setCurrentPlaylist} = actions

Tiếp theo, ta cấn kết nối playlistDataSlice vào store. Trong file ./redux/store.js, import playlistDataSlice và đặt vào combineReducers:

// ./redux/store.js
...

import playlistDataSlice from "./playlistDataSlice";


...

const store = configureStore({
    reducer: combineReducers({
        playlistData: playlistDataSlice
    }),
    devTools: true,
})

Như vậy ta đã setup xong Redux store với một key là playlistData

Bây giờ, bạn có thể mở browser và dùng Redux DevTools Extension để kiểm tra Redux store của mình. Bạn có thể tiếp tục công việc của mình với Redux store đã được thiết lập. Hoặc bạn có thể tìm hiểu thêm về cách kết nối Redux vào React Component.