TẠI SAO CHÚNG TA NÊN DÙNG MỘT MIDDLEWARE NHƯ REDUX THUNK

  -  

Xin kính chào, hôm nay mình xin reviews đến hầu như bạn cách giải pháp xử lý hầu hết action bất đồng điệu trong Redux bằng Việc thực hiện Redux thunk. Bên cạnh đó cũng trở thành có tác dụng 1 ví dụ nhằm những bạn có thể nắm rõ rộng về kiểu cách sử dụng redux-thunk

*
Bài viết gốc trên đây: https://www.juliandong.com/2020/03/xu-ly-asynchronous-redux-action-voi.html

1. Giới thiệu

Trong bài viết lần trước của bản thân mình tại đây cùng đây, tôi đã ra mắt về Redux cùng những áp dụng nó vào vào một project React. Trong số đó, phần đông action trong redux hồ hết nhất quán, có nghĩa là state sẽ tiến hành update tức thì lập tức Khi action được dispatch.Vậy sẽ ra làm sao nếu action của họ là bất nhất quán, Có nghĩa là action yêu cầu Call mang lại 1 API bên ngoài để lấy tài liệu hoặc triển khai 1 side-effect để cho tác dụng chẳng thể trả về ngay lập tức mau chóng được?

Rất may mắn Redux có cung cấp những middleware để giải pháp xử lý vụ việc với asynchronous action với side effect. Nổi tiếng tuyệt nhất là redux-thunk với redux-saga. Trong phạm vi nội dung bài viết này mình sẽ trình làng cùng với chúng ta về redux-thunk.

Bạn đang xem: Tại sao chúng ta nên dùng một middleware như redux thunk

2. Redux-thunk và asynchronous actions

Asynchronous actions

khi ta call 1 API bất đồng điệu, bao gồm 2 thời khắc ta nên quan lại tâm:

Thời điểm ban đầu gọiThời điểm cảm nhận kết quả

Tại từng thời điểm bên trên ta phần nhiều buộc phải biến hóa state của ứng dụng, và để triển khai điều ấy, ta đề xuất dispatch rất nhiều action nhưng mà sẽ tiến hành reducer xử trí một cách nhất quán. Đôi khi với từng API Call ta đề xuất dispatch 3 nhiều loại action

Action thông tin mang lại reducer là ban đầu triển khai API call: Reducer đang cách xử lý action này bằng việc chuyển đổi cờ loading hoặc isFetching trong state. khi đó UI vẫn hiển 1 spinner trình bày tài liệu đang rất được xử lýkích hoạt thông tin cho reducer là bài toán gọi API thành công: Reducer đã xử trí action này bởi câu hỏi update công dụng trả về từ bỏ API với đồng thời tắt cờ loading. UI khi đó đã ẩn spinner và hiển thị kết quả Action thông tin mang lại reducer là điện thoại tư vấn thất bại : Reducer sẽ reset lại cờ loading , giữ gìn error vào state và hiển thị error message sinh sống UI

redux-thunk

thunk: là 1 trong biện pháp Call khác của function, mà lại nó có 1 điểm nhất là nó là 1 trong những hàm được trả về từ 1 hàm khác.

Nhỏng họ sẽ biết về action trong redux chỉ đơn thuần là rất nhiều plain object bao gồm chứa 1 field là type với bất kỳ tài liệu như thế nào ta ao ước thêm vào

"type": "ACTION_TYPE", "payload" :"Anything you want"Và action creator là 1 trong những hàm trả về về một action (plain object)

const actionCreator = (data) => ( type: "ACTION_TYPE", payload: data)Đối với redux-thunk, nó là 1 middleware chất nhận được action creator trả về một function (thunk) cố gắng vì chưng trả về plain object. Function này sẽ dấn tđắm đuối số là hàm dispatch của store, với nó đang dispatch các action một giải pháp đồng bộ phía bên trong thunk khi nhưng mà asynchronous hotline được gọi. Nói những không giống, use-case thông thường độc nhất của redux-thunk là khi mang dữ liệu từ external API, redux-thunk chất nhận được dispatch những action theo lifecycle của request mang đến API ko kể.

Xem thêm: Có Nên Mua Đầu Thu Kỹ Thuật Số Trung Quốc Không? Đầu Thu Kts Trung Quốc

Ví dụ: ta buộc phải fetch tài liệu của một API, đầu tiên ta sẽ dispatch 1 action để báo rằng dữ liệu đang rất được fetch, rồi tiếp kia ví như kết quả trả về thành công xuất sắc, ta vẫn dispatch 1 action để báo rằng câu hỏi fetch tài liệu vẫn hoàn thành cùng nhận thấy tác dụng. Nếu vấn đề fetch không thắng cuộc, ta đã dispatch 1 action để báo rằng việc fetch dữ liệu dứt cùng dìm về lỗi.

Xem thêm: Balancer Là Gì ? Cách Giao Dịch Trên Balancer Nền Tảng Defi Balancer Hấp Dẫn Không

Để nắm rõ hơn về redux-thunk được áp dụng ra sao trong thực tiễn, họ đã đi sang một kiểm tra tại vị trí tiếp theo sau.

3. Demo

Trong ví dụ này, bản thân sẽ tạo ra 1 react tiện ích tất cả nhiệm vụ tìm kiếm user name từ bỏ github bằng việc sử dụng react, redux và redux-thunk

Khởi tạo ra project với thiết lập những package đề nghị thiết

Mình vẫn cần sử dụng create react tiện ích để khởi tạo project

$ npm init react-ứng dụng react-thunk # init project$ cd react-thunk $ npm i redux redux-thunk axtiện ích ios # install packagesSau Khi khởi chế tạo xong xuôi, chúng ta tiến hành kết cấu lại tlỗi mục src như sau:

src/components: đựng các component dùng vào ứng dụngsrc/actions: đựng action của reduxsrc/reducer: đựng store cùng reducerssrc/service: các service nhằm điện thoại tư vấn APIsrc/style: cất tệp tin css

Setup redux

Trong src/index.js

import React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./components/App";import Provider from "react-redux";import store from "./reducer/store";import * as serviceWorker from "./serviceWorker";ReactDOM.render( , document.getElementById("root"));serviceWorker.unregister();Thêm redux thunk vào src/reducer/store.js

import createStore, applyMiddleware from "redux";import thunk from "redux-thunk";import rootReducer from "./reducers";export const store = createStore(rootReducer, applyMiddleware(thunk));

Viết service Điện thoại tư vấn API

Trong src/services/index.js

import axtiện ích ios from "axios";const fetchUserService = username => return new Promise((resolve sầu, reject) => axquả táo.get(`https://api.github.com/users/$username`) .then(response => resolve(response.data)) .catch(error => reject(error)) )export default fetchUserService;

Tạo action

Trong src/actions/fetchUser.js

import FETCH_USER, FETCH_USER_FAILED, FETCH_USER_SUCCESS from "./constants";import fetchUserSerivce from "../services";export default username => return dispatch => dispatch(fetchUser()); fetchUserSerivce(username) .then(user => dispatch(fetchUserSuccess(user))) .catch(error => dispatch(fetchUserFailed(error))) const fetchUser = () => ( type: FETCH_USER);const fetchUserSuccess = user => ( type: FETCH_USER_SUCCESS, payload: user ,)const fetchUserFailed = error => ( type: FETCH_USER_FAILED, payload: error )

Tạo reducer

Trong src/reducer/reducers.js

import FETCH_USER, FETCH_USER_SUCCESS, FETCH_USER_FAILED from "../actions/constants";const initialState = loading: false, error: null, user: nullexport const rootReducer = (state = initialState, action) => switch (action.type) case FETCH_USER: return loading: true, user: null, error: null, ; case FETCH_USER_SUCCESS: return loading: false, user: action.payload.user, error: null, ; case FETCH_USER_FAILED: return loading: false, user: null, error: action.payload.error default: return state; vì thế họ vẫn cài đặt redux kết thúc, giờ đồng hồ vẫn hiện nay UI components

Search bar

Trong src/components/SearchBar.js

import React from "react";import fetchUser from "../actions/fetchUser";import connect from "react-redux";import "../style/SearchBar.css"class SearchBar extends React.Component { constructor(props) super(props); this.state = username: "" this._onChange = this._onChange.bind(this); this._onSubmit = this._onSubmit.bind(this); _onChange(event) const value = sự kiện.target.value; this.setState( username: value ) _onSubmit(event) event.preventDefault(); this.props.fetchUser(this.state.username) render() { return (