{"id":2372,"date":"2021-03-07T23:22:32","date_gmt":"2021-03-07T16:22:32","guid":{"rendered":"https:\/\/5mtech.vn\/?p=2372"},"modified":"2021-03-07T23:23:29","modified_gmt":"2021-03-07T16:23:29","slug":"huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api","status":"publish","type":"post","link":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html","title":{"rendered":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API"},"content":{"rendered":"

Ch\u00e0o m\u1ecdi ng\u01b0\u1eddi, trong b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng Redux Thunk k\u1ebft h\u1ee3p c\u00f9ng React Hooks API.<\/p>\n

\u0110\u1ec3 b\u1ea1n\u00a0h\u1ecdc ReactJS d\u1ec5 d\u00e0ng h\u01a1n th\u00ec m\u00ecnh s\u1ebd l\u00e0m nh\u1eefng v\u00ed d\u1ee5 nh\u1ecf \u0111\u1ec3 b\u1ea1n n\u1eafm r\u00f5 h\u01a1n v\u1ec1 nh\u1eefng k\u1ef9 thu\u1eadt x\u1eed l\u00fd v\u00e0 k\u1ebft h\u1ee3p v\u1edbi m\u1ed9t s\u1ed1 library th\u01b0\u1eddng \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng.<\/p>\n

Kh\u1edfi t\u1ea1o project v\u00e0 c\u00e0i package<\/span><\/h2>\n

\u0110\u1ea7u ti\u00ean l\u00e0 ch\u00fang ta t\u1ea1o m\u1ed9t project m\u1edbi b\u1eb1ng l\u1ec7nh\u00a0yarn create react-app redux-thunk-hooks<\/code><\/p>\n

Sau khi \u0111\u00e3 t\u1ea1o xong th\u00ec b\u1ea1n truy c\u1eadp v\u00e0o project b\u1eb1ng l\u1ec7nh\u00a0cd redux-thunk-hooks<\/code>\u00a0v\u00e0 ti\u1ebfn h\u00e0nh c\u00e0i 3 package\u00a0redux, react-redux, redux-thunk<\/code>\u00a0b\u1eb1ng l\u1ec7nh<\/p>\n

yarn add redux react-redux redux-thunk<\/code><\/pre>\n
Sau \u0111\u00f3 th\u00ec c\u00e0i th\u00eam\u00a0redux-logger<\/code>\u00a0b\u1eb1ng l\u1ec7nh\u00a0yarn add redux-logger --dev<\/code>\u00a0\u0111\u1ec3 ch\u1ec9 c\u00e0i cho m\u00f4i tr\u01b0\u1eddng\u00a0dev<\/code>\u00a0th\u00f4i.<\/p>\n
Sau khi add xong th\u00ec \u001dfile\u00a0package.json<\/code>\u00a0c\u1ee7a b\u1ea1n s\u1ebd tr\u00f4ng th\u1ebf n\u00e0y<\/p>\n
{\r\n  \"name\": \"with-redux-thunk\",\r\n  \"version\": \"0.1.0\",\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"@testing-library\/jest-dom\": \"^4.2.4\",\r\n    \"@testing-library\/react\": \"^9.3.2\",\r\n    \"@testing-library\/user-event\": \"^7.1.2\",\r\n    \"react\": \"^16.13.1\",\r\n    \"react-dom\": \"^16.13.1\",\r\n    \"react-redux\": \"^7.2.1\",\r\n    \"react-scripts\": \"3.4.3\",\r\n    \"redux\": \"^4.0.5\",\r\n    \"redux-thunk\": \"^2.3.0\"\r\n  },\r\n  \"scripts\": {\r\n    \"start\": \"react-scripts start\",\r\n    \"build\": \"react-scripts build\",\r\n    \"test\": \"react-scripts test\",\r\n    \"eject\": \"react-scripts eject\"\r\n  },\r\n  \"eslintConfig\": {\r\n    \"extends\": \"react-app\"\r\n  },\r\n  \"browserslist\": {\r\n    \"production\": [\r\n      \">0.2%\",\r\n      \"not dead\",\r\n      \"not op_mini all\"\r\n    ],\r\n    \"development\": [\r\n      \"last 1 chrome version\",\r\n      \"last 1 firefox version\",\r\n      \"last 1 safari version\"\r\n    ]\r\n  },\r\n  \"devDependencies\": {\r\n    \"redux-logger\": \"^3.0.6\"\r\n  }\r\n}<\/code><\/pre>\n
C\u00e1c b\u1ea1n l\u01b0u \u00fd v\u1ec1 phi\u00ean b\u1ea3n c\u1ee7a\u00a0Redux\u00a0th\u00ec t\u1eeb b\u1ea3n 7.1 tr\u1edf l\u00ean th\u00ec m\u1edbi h\u1ed7 tr\u1ee3 Hooks nha.<\/p>\n
Th\u00eam Redux v\u00e0o project<\/span><\/h2>\n
Ti\u1ebfp theo c\u00e1c b\u1ea1n t\u1ea1o m\u1ed9t th\u01b0 m\u1ee5c\u00a0src\/redux<\/code>,\u00a0src\/redux\/reducers<\/code>,\u00a0src\/redux\/actions<\/code>,\u00a0src\/redux\/constants<\/code>\u00a0v\u00e0 m\u1ed9t file\u00a0src\/redux\/store.js<\/code><\/p>\n
Trong v\u00ed d\u1ee5 l\u1ea7n n\u00e0y m\u00ecnh s\u1ebd t\u1ea1o m\u1ed9t project \u0111\u1ec3 show m\u1ed9t list posts get t\u1eeb api v\u1ec1.<\/p>\n
Sau \u0111\u00f3 t\u1ea1o c\u00e1c file b\u00ean trong c\u00e1c th\u01b0 m\u1ee5c l\u1ea7n l\u01b0\u1ee3t\u00a0actions\/postAction.js<\/code>,\u00a0reducers\/postReducer.js<\/code>,\u00a0constants\/post.js<\/code><\/p>\n
Sau khi ho\u00e0n t\u1ea5t th\u00ec c\u1ea5u tr\u00fac project s\u1ebd nh\u01b0 sau:<\/p>\n
\n
\"Folder
Folder Structure<\/figcaption><\/figure>\n<\/div>\n
Ch\u00fang ta s\u1ebd t\u1ea1o nh\u1eefng action name \u1edf trong file\u00a0constant<\/code>\u00a0nh\u01b0 sau<\/p>\n
\/\/ post.js\r\nexport const FETCH_POST_REQUEST = \"FETCH_POST_REQUEST\";\r\nexport const FETCH_POST_SUCCESS = \"FETCH_POST_SUCCESS\";\r\nexport const FETCH_POST_ERROR = \"FETCH_POST_ERROR\";<\/code><\/pre>\n
Ch\u00fang ta m\u1edf file\u00a0postReducer.js<\/code>\u00a0ra<\/p>\n
\/\/ import constants\r\nimport {\r\n    FETCH_POST_REQUEST,\r\n    FETCH_POST_SUCCESS,\r\n    FETCH_POST_ERROR,\r\n} from '..\/constants\/\u001dpost';\r\n\r\n\/\/ kh\u1edfi t\u1ea1o m\u1ed9t init state\r\nconst initialState = {\r\n    requesting: false,\r\n    success: false,\r\n    message: null,\r\n    data: null\r\n}\r\n\r\n\/\/ b\u1eaft t\u1eebng action type\r\nfunction exampleReducers(state = initialState, payload) {\r\n    switch (payload.type) {\r\n        case FETCH_EXAMPLE_REQUEST:\r\n            return {\r\n                ...state,\r\n                requesting: true\r\n            };\r\n        case FETCH_EXAMPLE_SUCCESS:\r\n            return {\r\n                ...state,\r\n                requesting: false,\r\n                success: true,\r\n                data: payload.data\r\n            };\r\n        case FETCH_EXAMPLE_ERROR:\r\n            return {\r\n                ...state,\r\n                requesting: false,\r\n                message: payload.message\r\n            };\r\n\r\n        default:\r\n            return state;\r\n    }\r\n}\r\n\r\nexport default exampleReducers;\r\n<\/code><\/pre>\n
Ti\u1ebfp theo ch\u00fang ta vi\u1ebft action<\/p>\n
Ch\u00fang ta\u00a0dispatch<\/code>\u00a0v\u1edbi type\u00a0FETCH_POST_REQUEST<\/code>\u00a0sau \u0111\u00f3 call api<\/p>\n
Khi api \u0111\u00e3 call xong th\u00ec l\u1ea1i\u00a0dispatch<\/code>\u00a0\u0111\u1ebfn\u00a0FETCH_POST_SUCCESS<\/code>\u00a0v\u00e0 k\u00e8m theo data\u00a0responseBody<\/code><\/p>\n
Tr\u01b0\u1eddng h\u1ee3p l\u1ed7i th\u00ec n\u00f3 s\u1ebd t\u1ef1 ch\u1ea1y v\u00e0o\u00a0catch<\/code>\u00a0v\u00e0 s\u1ebd dispatch \u0111\u1ebfn\u00a0FETCH_POST_ERROR<\/code><\/p>\n
\/\/ postAction.js\r\nimport {\r\n    FETCH_POST_REQUEST,\r\n    FETCH_POST_SUCCESS,\r\n    FETCH_POST_ERROR,\r\n} from '..\/constants\/POST';\r\n\r\nexport const loadPosts = () => async dispatch => {\r\n    try {\r\n        dispatch({ type: FETCH_POST_REQUEST });\r\n\r\n        const url = \"https:\/\/jsonplaceholder.typicode.com\/posts\";\r\n        const response = await fetch(url)\r\n        const responseBody = await response.json();\r\n        dispatch({\r\n            type: FETCH_POST_SUCCESS,\r\n            data: responseBody\r\n        });\r\n    } catch (error) {\r\n        console.error(error);\r\n        dispatch({\r\n            type: FETCH_POST_ERROR,\r\n            message: error\r\n        });\r\n    }\r\n}<\/code><\/pre>\n
Sau \u0111\u00f3 s\u1ebd t\u1ea1o m\u1ed9t file\u00a0reducers\/index.js<\/code>\u00a0\u0111\u1ec3 l\u00e0m main reducers<\/p>\n
\/\/ reducers\/index.jsjs\r\nimport { combineReducers } from 'redux';\r\nimport postReducer from '.\/postReducer';\r\n\r\nconst reducers = combineReducers({\r\n\tposts: postReducer,\r\n});\r\n\r\nexport default (state, action) => reducers(state, action);<\/code><\/pre>\n
Ti\u1ebfp theo ch\u00fang ta c\u00f9ng vi\u1ebft\u00a0store, v\u1ec1 l\u00fd thuy\u1ebft c\u1ee7a store m\u00ecnh s\u1ebd kh\u00f4ng n\u00f3i l\u1ea1i \u1edf \u0111\u00e2y n\u1eefa nh\u00e9.<\/p>\n
import { createStore, applyMiddleware } from 'redux'\r\nimport { createLogger } from 'redux-logger'\r\nimport thunk from 'redux-thunk'\r\nimport reducer from '.\/reducers'\r\n\r\nconst middleware = [ thunk ];\r\n\/\/ check n\u1ebfu kh\u00f4ng ph\u1ea3i production th\u00ec push logger v\u00e0o \u0111\u1ec3 log ra nh\u1eefng action\r\nif (process.env.NODE_ENV !== 'production') {\r\n  middleware.push(createLogger());\r\n}\r\n\r\nexport const store = createStore(\r\n  reducer,\r\n  applyMiddleware(...middleware)\r\n)<\/code><\/pre>\n
K\u1ebft n\u1ed1i redux v\u00e0o app<\/span><\/h2>\n
Sau khi \u0111\u00e3 xong ph\u1ea7n\u00a0redux<\/code>\u00a0th\u00ec b\u1ea1n h\u00e3y m\u1edf file\u00a0App.js<\/code>\u00a0l\u00ean v\u00e0 import 2 th\u1eb1ng<\/p>\n
import { useDispatch, useSelector } from 'react-redux';\r\nimport { loadPosts } from '.\/redux\/actions\/postAction';<\/code><\/pre>\n
Ti\u1ebfp t\u1ee5c trong ph\u1ea7n app function ch\u00fang ta vi\u1ebft m\u1ed9t h\u00e0m\u00a0useEffect<\/code>\u00a0v\u00e0 \u0111\u1ed3ng th\u1eddi khai b\u00e1o\u00a0useDispatch<\/code>\u00a0\u0111\u1ec3 s\u1eed d\u1ee5ng<\/p>\n
 <\/p>\n
const dispatch = useDispatch();\r\n  useEffect(() => {\r\n    dispatch(loadPosts());\r\n  }, [dispatch]);<\/code><\/pre>\n
B\u1ea1n v\u1eabn g\u1ecdi dispatch nh\u01b0 b\u00ecnh th\u01b0\u1eddng, nh\u01b0ng v\u1edbi hooks th\u00ec b\u1ea1n s\u1ebd s\u1eed d\u1ee5ng\u00a0useDispatch<\/code>\u00a0\u0111\u1ec3 k\u1ebft n\u00f3i v\u1edbi redux.<\/p>\n
C\u00f2n v\u1edbi\u00a0useEffect<\/code>\u00a0n\u00f3 s\u1ebd\u00a0ch\u1ea1y m\u1ed7i khi update, n\u00f3 s\u1ebd t\u01b0\u01a1ng \u1ee9ng v\u1edbi c\u00e1c h\u00e0m c\u0169\u00a0componentDidMount<\/code>,\u00a0componentDidUpdate<\/code>,\u00a0componentWillUnmount<\/code><\/p>\n
Ti\u1ebfp theo ch\u00fang ta s\u1ebd g\u1ecdi hook\u00a0useSelector<\/code>\u00a0ra \u0111\u1ec3 l\u1ea5y state t\u01b0\u01a1ng t\u1ef1 vi\u1ec7c b\u1ea1n\u00a0mapState<\/code><\/p>\n
 <\/p>\n
const data = useSelector((state) => state.posts.data);\r\n  const requesting = useSelector((state) => state.posts.requesting);<\/code><\/pre>\n
T\u1ea5t c\u1ea3 \u0111\u00e3 xong m\u00ecnh chuy\u1ec3n xu\u1ed1ng d\u01b0\u1edbi \u0111\u1ec3 show data ra nh\u01b0 sau<\/p>\n
return (\r\n    <div className=\"App\">\r\n      <header className=\"App-header\">\r\n        {\r\n          requesting ?\r\n            <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\r\n            :\r\n            (data && data.length > 0) ? <div>\r\n              <ul className=\"list-group\">\r\n                {data.map(item =>\r\n                  <li key={item.id} className=\"list-group-item\">{item.title}<\/li>\r\n                )}\r\n              <\/ul>\r\n            <\/div>\r\n              : <div>Data is empty<\/div>\r\n        }\r\n      <\/header>\r\n    <\/div>\r\n  );<\/code><\/pre>\n
To\u00e0n b\u1ed9 file\u00a0App.js<\/code>\u00a0c\u1ee7a m\u00ecnh s\u1ebd nh\u01b0 th\u1ebf n\u00e0y<\/p>\n
import React, { useEffect } from 'react';\r\nimport logo from '.\/logo.svg';\r\nimport '.\/App.css';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { loadPosts } from '.\/redux\/actions\/postAction';\r\n\r\nfunction App() {\r\n  const data = useSelector((state) => state.post.data);\r\n  const requesting = useSelector((state) => state.post.requesting);\r\n\r\n  const dispatch = useDispatch();\r\n  useEffect(() => {\r\n    dispatch(loadPosts());\r\n  }, [dispatch]);\r\n\r\n  return (\r\n    <div className=\"App\">\r\n      <header className=\"App-header\">\r\n        {\r\n          requesting ?\r\n            <img src={logo} className=\"App-logo\" alt=\"logo\" \/>\r\n            :\r\n            (data && data.length > 0) ? <div>\r\n              <ul className=\"list-group\">\r\n                {data.map(item =>\r\n                  <li key={item.id} className=\"list-group-item\">{item.title}<\/li>\r\n                )}\r\n              <\/ul>\r\n            <\/div>\r\n              : <div>Data is empty<\/div>\r\n        }\r\n      <\/header>\r\n    <\/div>\r\n  );\r\n}\r\n\r\nexport default App;\r\n<\/code><\/pre>\n
Ok gi\u1edd ch\u1ea1y th\u1eed th\u00f4i\u00a0yarn start<\/code>\u00a0v\u00e0 m\u1edf c\u1ed5ng 300 ra xem n\u00f3 ra c\u00e1i g\u00ec n\u00e0o<\/p>\n
\"Redux
Redux thunk hooks result<\/figcaption><\/figure>\n
V\u1eady l\u00e0 ok kh\u00f4ng c\u00f3 l\u1ed7i l\u1ea7m g\u00ec c\u1ea3 r\u1ed3i nh\u00e9.<\/p>\n
K\u1ebft lu\u1eadn<\/span><\/h2>\n
Nh\u01b0 v\u1eady qua b\u00e0i n\u00e0y m\u00ecnh \u0111\u00e3 h\u01b0\u1edbng d\u1eabn b\u1ea1n s\u1eed d\u1ee5ng Redux Thunk Hooks. N\u00f3 kh\u00f4ng c\u00f3 g\u00ec kh\u00e1c nhi\u1ec1u so v\u1edbi s\u1eed d\u1ee5ng b\u00ecnh th\u01b0\u1eddng, ch\u1ec9 c\u1ea7n thay m\u1ed9t s\u1ed1 ch\u1ed7 l\u00e0 ok<\/p>\n
N\u1ebfu c\u00f3 b\u1ea5t k\u1ef3 th\u1eafc m\u1eafc n\u00e0o b\u1ea1n c\u00f3 th\u1ec3 comment \u1edf b\u00ean d\u01b0\u1edbi\u00a0\u0111\u1ec3 c\u00f9ng th\u1ea3o lu\u1eadn nh\u00e9<\/p>\n
H\u1eb9n g\u1eb7p b\u1ea1n trong nh\u1eefng b\u00e0i ti\u1ebfp theo.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ch\u00e0o m\u1ecdi ng\u01b0\u1eddi, trong b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng Redux Thunk k\u1ebft h\u1ee3p c\u00f9ng React Hooks API. \u0110\u1ec3 b\u1ea1n\u00a0h\u1ecdc ReactJS d\u1ec5 d\u00e0ng h\u01a1n th\u00ec m\u00ecnh s\u1ebd l\u00e0m nh\u1eefng v\u00ed d\u1ee5 nh\u1ecf \u0111\u1ec3 b\u1ea1n n\u1eafm r\u00f5 h\u01a1n v\u1ec1 nh\u1eefng k\u1ef9 thu\u1eadt x\u1eed l\u00fd v\u00e0 k\u1ebft h\u1ee3p v\u1edbi m\u1ed9t s\u1ed1 library […]\n","protected":false},"author":1,"featured_media":2074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[462],"tags":[509,511,513,515],"class_list":["post-2372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lap-trinh","tag-react","tag-react-hooks","tag-redux","tag-redux-thunk"],"yoast_head":"\nH\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API - 5M Technologies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API - 5M Technologies\" \/>\n<meta property=\"og:description\" content=\"Ch\u00e0o m\u1ecdi ng\u01b0\u1eddi, trong b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng Redux Thunk k\u1ebft h\u1ee3p c\u00f9ng React Hooks API. \u0110\u1ec3 b\u1ea1n\u00a0h\u1ecdc ReactJS d\u1ec5 d\u00e0ng h\u01a1n th\u00ec m\u00ecnh s\u1ebd l\u00e0m nh\u1eefng v\u00ed d\u1ee5 nh\u1ecf \u0111\u1ec3 b\u1ea1n n\u1eafm r\u00f5 h\u01a1n v\u1ec1 nh\u1eefng k\u1ef9 thu\u1eadt x\u1eed l\u00fd v\u00e0 k\u1ebft h\u1ee3p v\u1edbi m\u1ed9t s\u1ed1 library [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html\" \/>\n<meta property=\"og:site_name\" content=\"5M Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/5mtech.vn\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/5mtech.vn\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-07T16:22:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-03-07T16:23:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/Banner-Graphics_new.png\" \/>\n\t<meta property=\"og:image:width\" content=\"572\" \/>\n\t<meta property=\"og:image:height\" content=\"569\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#\\\/schema\\\/person\\\/461255659c993d6b75b9fee0e2965c57\"},\"headline\":\"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API\",\"datePublished\":\"2021-03-07T16:22:32+00:00\",\"dateModified\":\"2021-03-07T16:23:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html\"},\"wordCount\":724,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/02\\\/Banner-Graphics_new.png\",\"keywords\":[\"React\",\"React Hooks\",\"Redux\",\"Redux Thunk\"],\"articleSection\":[\"L\u1eadp tr\u00ecnh\"],\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html\",\"name\":\"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API - 5M Technologies\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/02\\\/Banner-Graphics_new.png\",\"datePublished\":\"2021-03-07T16:22:32+00:00\",\"dateModified\":\"2021-03-07T16:23:29+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#primaryimage\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/02\\\/Banner-Graphics_new.png\",\"contentUrl\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/02\\\/Banner-Graphics_new.png\",\"width\":572,\"height\":569},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Trang ch\u1ee7\",\"item\":\"https:\\\/\\\/5mtech.vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#website\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/\",\"name\":\"5M Technologies\",\"description\":\"Cung c\u1ea5p gi\u1ea3i ph\u00e1p c\u00f4ng ngh\u1ec7 th\u00f4ng tin v\u00e0 truy\u1ec1n th\u00f4ng\",\"publisher\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/5mtech.vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#organization\",\"name\":\"5M Technologies\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/02\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/02\\\/logo.png\",\"width\":819,\"height\":969,\"caption\":\"5M Technologies\"},\"image\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/5mtech.vn\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC--7vNJHf_iGGodO1yLgKKg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#\\\/schema\\\/person\\\/461255659c993d6b75b9fee0e2965c57\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"description\":\"5M Technologies - Cung c\u1ea5p gi\u1ea3i ph\u00e1p c\u00f4ng ngh\u1ec7 th\u00f4ng tin v\u00e0 truy\u1ec1n th\u00f4ng\",\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/5mtech.vn\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API - 5M Technologies","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html","og_locale":"vi_VN","og_type":"article","og_title":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API - 5M Technologies","og_description":"Ch\u00e0o m\u1ecdi ng\u01b0\u1eddi, trong b\u00e0i vi\u1ebft n\u00e0y m\u00ecnh s\u1ebd h\u01b0\u1edbng d\u1eabn b\u1ea1n c\u00e1ch s\u1eed d\u1ee5ng Redux Thunk k\u1ebft h\u1ee3p c\u00f9ng React Hooks API. \u0110\u1ec3 b\u1ea1n\u00a0h\u1ecdc ReactJS d\u1ec5 d\u00e0ng h\u01a1n th\u00ec m\u00ecnh s\u1ebd l\u00e0m nh\u1eefng v\u00ed d\u1ee5 nh\u1ecf \u0111\u1ec3 b\u1ea1n n\u1eafm r\u00f5 h\u01a1n v\u1ec1 nh\u1eefng k\u1ef9 thu\u1eadt x\u1eed l\u00fd v\u00e0 k\u1ebft h\u1ee3p v\u1edbi m\u1ed9t s\u1ed1 library [...]","og_url":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html","og_site_name":"5M Technologies","article_publisher":"https:\/\/www.facebook.com\/5mtech.vn","article_author":"https:\/\/www.facebook.com\/5mtech.vn","article_published_time":"2021-03-07T16:22:32+00:00","article_modified_time":"2021-03-07T16:23:29+00:00","og_image":[{"width":572,"height":569,"url":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/Banner-Graphics_new.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"admin","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#article","isPartOf":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html"},"author":{"name":"admin","@id":"https:\/\/5mtech.vn\/#\/schema\/person\/461255659c993d6b75b9fee0e2965c57"},"headline":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API","datePublished":"2021-03-07T16:22:32+00:00","dateModified":"2021-03-07T16:23:29+00:00","mainEntityOfPage":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html"},"wordCount":724,"commentCount":0,"publisher":{"@id":"https:\/\/5mtech.vn\/#organization"},"image":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#primaryimage"},"thumbnailUrl":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/Banner-Graphics_new.png","keywords":["React","React Hooks","Redux","Redux Thunk"],"articleSection":["L\u1eadp tr\u00ecnh"],"inLanguage":"vi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html","url":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html","name":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API - 5M Technologies","isPartOf":{"@id":"https:\/\/5mtech.vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#primaryimage"},"image":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#primaryimage"},"thumbnailUrl":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/Banner-Graphics_new.png","datePublished":"2021-03-07T16:22:32+00:00","dateModified":"2021-03-07T16:23:29+00:00","breadcrumb":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#primaryimage","url":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/Banner-Graphics_new.png","contentUrl":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/Banner-Graphics_new.png","width":572,"height":569},{"@type":"BreadcrumbList","@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/huong-dan-su-dung-redux-thunk-hooks-ket-hop-cung-react-hooks-api.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang ch\u1ee7","item":"https:\/\/5mtech.vn\/"},{"@type":"ListItem","position":2,"name":"H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng Redux Thunk Hooks k\u1ebft h\u1ee3p c\u00f9ng React Hooks API"}]},{"@type":"WebSite","@id":"https:\/\/5mtech.vn\/#website","url":"https:\/\/5mtech.vn\/","name":"5M Technologies","description":"Cung c\u1ea5p gi\u1ea3i ph\u00e1p c\u00f4ng ngh\u1ec7 th\u00f4ng tin v\u00e0 truy\u1ec1n th\u00f4ng","publisher":{"@id":"https:\/\/5mtech.vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/5mtech.vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/5mtech.vn\/#organization","name":"5M Technologies","url":"https:\/\/5mtech.vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/5mtech.vn\/#\/schema\/logo\/image\/","url":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/logo.png","contentUrl":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/logo.png","width":819,"height":969,"caption":"5M Technologies"},"image":{"@id":"https:\/\/5mtech.vn\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/5mtech.vn","https:\/\/www.youtube.com\/channel\/UC--7vNJHf_iGGodO1yLgKKg"]},{"@type":"Person","@id":"https:\/\/5mtech.vn\/#\/schema\/person\/461255659c993d6b75b9fee0e2965c57","name":"admin","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/secure.gravatar.com\/avatar\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g","caption":"admin"},"description":"5M Technologies - Cung c\u1ea5p gi\u1ea3i ph\u00e1p c\u00f4ng ngh\u1ec7 th\u00f4ng tin v\u00e0 truy\u1ec1n th\u00f4ng","sameAs":["https:\/\/www.facebook.com\/5mtech.vn"]}]}},"_links":{"self":[{"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/posts\/2372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/comments?post=2372"}],"version-history":[{"count":1,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/posts\/2372\/revisions"}],"predecessor-version":[{"id":2374,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/posts\/2372\/revisions\/2374"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/media\/2074"}],"wp:attachment":[{"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/media?parent=2372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/categories?post=2372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/tags?post=2372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}