Redux-Toolkit-Setup

Tiếp theo bài redux trước. Mình hnay sẽ nói về redux-Toolkit và setup nó như thế nào. Bỏ qua nhưng vấn đề như nó là gì ? và tại sao sử dụng nó, bài trước nói rồi nha ae.

Thì mục tiêu vẫn là setup nó trong dự án, thế nên cũng phải yêu cầu ae là nắm được redux thì bài này mới giúp ae hết cỡ được. Nhảy cóc làm thì được đấy nhưng chã nhớ cái gì đâu.

Nói sơ tí nào

• Khi làm việc với API, chúng ta sẽ cần phải chờ đến khi API thực hiện xong, mới tiếp tục thao tác gì đó. Việc như thế này được gọi là asynchronous, với Redux chỉ có synchronous thôi. Vậy để thực hiện được synchronous, chúng ta cần một middleware như Redux-Thunk hoặc Saga. Với Redux Toolkit, Redux-Thunk là đã tích hợp sẵn rồi.

Bài này mình cũng chỉ nói tới những bạn đã hiểu về redux và mục địch cuối là setup và sử dụng.

Mọi thông tin anh em tìm hiểu thì lên trang chủ đọc. bài này chỉ hỗ trợ anh em quên hoặc mới học về redux và redux-toolkit thôi. Trang chủ vẫn là chân ái

Hình ảnh về ReduxToolkit

• Redux Toolkit là một bước tiến và tập hợp của nhiều công cụ giúp làm cho việc sử dụng Redux mạnh mẽ hơn và giảm bớt boilerplate code.
• Cả hai đều dựa trên các nguyên tắc cơ bản như single source of truth, immutability, và mô hình unidirectional data flow.
• Redux Toolkit không thay đổi cách Redux hoạt động cơ bản mà chỉ mang lại một số tiện ích và công cụ giúp việc phát triển và bảo trì ứng dụng dễ dàng hơn.

khác gì với redux

• Có sẵn Redux DevTools : Mở Redux DevTools trực tiếp trong trình duyệt của bạn. Nếu bạn sử dụng Google Chrome, bạn có thể cài đặt extension "Redux DevTools" từ Chrome Web Store. Redux DevTools Extension.

• Có sẵn redux-thunk để thực hiện async actions : Xử lý một tác vụ bất đồng bộ nhờ vào redux Thunk.

• Tự động sử dụng thư viện Immerjs

• Trước tiên là chúng ta được gọi trực tiếp state ra để viết code không cần phải tạo bản coppy như bên redux (es6).

Vào Việc :

• Cài Đặt

  npm install redux-devtools-extension
  

  yarn add redux-devtools-extension
  

  Cài xong roài thì ae tạo các fonder và file như dưới còn trong file có gì thì chờ tí nè😅:

  • Tạo một fonder services để setup api trước
    • Tạo file apiService.js
  • Tạo fonder Store :
    • Tạo fonder với tên dự án của bạn (movie,...)
      • Trong này ae tạo file slice.js
      • Tạo thêm file thunk.js
    • Tạo file index.js => store
    • Tạo file rootReducer.js => quản lý reducer

Tiếp Nha :

• Trong apiService.js sử dụng axios

import axios from 'axios'; const apiService = axios.create({
baseURL: 'https://api.example.com',
}); export const fetchData = async () => {
try { const response = await apiService.get('/data'); return response.data;
} catch (error) { throw error;
}
}; export default apiService;

• Trong thunk.js :

import { createAsyncThunk } from '@reduxjs/toolkit';
import { fetchData } from './apiService'; // Action creator bất đồng bộ sử dụng createAsyncThunk
export const fetchDataThunk = createAsyncThunk('data/fetchData', async () => { try { const data = await fetchData(); return data; } catch (error) { throw error; }
});

• Trong splice.js :

import { createSlice } from '@reduxjs/toolkit'; const dataSlice = createSlice({ name: 'data', initialState: { status: 'idle', data: null, error: null }, reducers: {}, extraReducers: (builder) => { // Thay thế `fetchDataThunk` bằng action creator thích hợp builder .addCase(fetchDataThunk.pending, (state) => { state.status = 'loading'; }) .addCase(fetchDataThunk.fulfilled, (state, action) => { state.status = 'succeeded'; state.data = action.payload; }) .addCase(fetchDataThunk.rejected, (state, action) => { state.status = 'failed'; state.error = action.error.message || 'Something went wrong'; }); },
}); export default dataSlice.reducer;
export const { actions, reducer } = dataSlice; 

• Trong rootReducer.js :

import { combineReducers } from '@reduxjs/toolkit';
import dataReducer from './dataSlice'; const rootReducer = combineReducers({ data: dataReducer,
}); export default rootReducer;

• Trong index.js :

 import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer'; const configureAppStore = () => { const store = configureStore({ reducer: rootReducer, devTools: process.env.NODE_ENV !== 'production', // Chỉ sử dụng Redux DevTools ở môi trường development }); return store;
};
export default configureAppStore;

Xong store rồi thì kết nối với dự án :

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureAppStore from './store'; const store = configureAppStore(); ReactDOM.render( <Provider store={store}> <App /> </Provider>,
);

Sử dụng các hooks useSelector và useDispatch để dispatch action và lấy trạng thái từ Redux store:

// ExampleComponent.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchDataThunk } from './dataSlice'; const ExampleComponent = () => { const { status, data, error } = useSelector((state) => state.data); const dispatch = useDispatch(); useEffect(() => { // Dispatch action để gọi API khi component được render dispatch(fetchDataThunk()); }, [dispatch]); if (status === 'loading') { return <p>Loading...</p>; } if (status === 'failed') { return <p>Error: {error}</p>; } return <p>Data: {data}</p>;
}; export default ExampleComponent;

Lời kết

• Ráng nhét đi ae ạ. khổ nào cũng qua thôi 😬😬😬😬
• Chúc anh em thành công !