Hướng dẫn sử dụng createAsyncThunk trong Redux Toolkit

12 tháng 10, 2021 – 3769 lượt xemNếu bạn chưa từng sử dụng Redux Toolkit thì hoàn toàn có thể xem bài hướng dẫn này trước : https://shopdothang.com/posts/36409/huong-dan-su-dung-react-router-va-redux-toolkit

Bài viết này mình sẽ hướng dẫn cách thực hiện các async logic (xử lý bất đồng bộ) trong Redux Toolkit, cụ thể là sử dụng createAsyncThunk để kết nối với API login.

Ví dụ demo chúng ta có thể lấy luôn từ ví dụ trước rồi cải tiến thêm: https://stackblitz.com/edit/react-router-redux-toolkit?file=src/index.js.

Đầu tiên là bổ sung giao diện để có thêm ô nhập mật khẩu vì khi gọi API sẽ cần có email và password.
Login form

Bây giờ khi người dùng bấm nút Login, chúng ta sẽ gọi vào API để thực hiện login. Để gọi API thì chúng ta dùng luôn hàm fetch() có sẵn. Lệnh fetch() là một lệnh async, nên sẽ không viết code logic vào trong action để cập nhật state như trước, mà chúng ta sẽ dùng hàm createAsyncThunk để tạo ra các async action.

Ví dụ tạo một async action ( và export luôn ra ngoài để sử dụng ở Component ) :

export const login = createAsyncThunk(
   
  ' user / login ',

   
  async (data, { rejectWithValue }) => {
     
    const response = await fetch(
      ' https://fake-rest-api-nodejs.herokuapp.com/login ',
      {
        method: ' POST ',
        headers: {
          ' Content-Type ': ' application / json ',
        },
        body toàn thân: JSON.stringify(data),
      }
    );

     
    const jsonData = await response.json();

     
    if (response.status < 200 | | response.status > = 300) {
      return rejectWithValue(jsonData);
    }

     
    return jsonData;
  }
);

Ví dụ trên sẽ tạo 1 request đến API backend : https://fake-rest-api-nodejs.herokuapp.com/login, API này sẽ trả về thông tin user nếu đăng nhập thành công xuất sắc. Các bạn hoàn toàn có thể tự tạo một API riêng bằng cách dùng tool này : https://github.com/robinhuy/fake-rest-api-nodejs ( xem hướng dẫn Tiếng Việt tại đây : https://shopdothang.com/posts/35578/tao-1-rest-api-phuc-vu-cho-muc-dich-hoc-tap-trong-30-giay ) .Tiếp theo tất cả chúng ta sẽ tạo ra những extra Reducers dùng để giải quyết và xử lý những trạng thái của async action ở trên :

 
export const login = createAsyncThunk(' user / login ', {
   
})

export const userSlice = createSlice({
  name: ' user ',
    
   
  initialState: {
    isLoading: false,
    errorMessage: ' ',
    currentUser: 

null

, }, reducers: { logout: (state) => { state.currentUser = null; state.errorMessage = ' '; }, }, extraReducers: (builder) => { builder.addCase(login.pending, (state) => { state.isLoading = true; }); builder.addCase(login.fulfilled, (state, action) => { state.isLoading = false; state.currentUser = action.payload; }); builder.addCase(login.rejected, (state, action) => { state.isLoading = false; state.errorMessage = action.payload.message; }); }, });

Sau khi code xong action thì tất cả chúng ta dispatch như thông thường. Ví dụ truyền vào 1 object có chứa email và password :

Sửa lại thêm một số ít logic khi có thêm những state như isLoading, currentUser, errorMessage, cái này thì những bạn hãy thử tự làm vì cách lấy state ra vẫn như cũ .Tham khảo hàng loạt code mẫu tại đây : https://stackblitz.com/edit/react-router-redux-toolkit-fetch-api?file=src/App.js .Happy coding 😎

ĐÁNH GIÁ post
Bài viết liên quan

Tư vấn miễn phí (24/7) 094 179 2255