It's common to have logic directly in components, such as making an async request in a click handler or a useEffect hook and then processing the results. Thunks (and other Redux middleware) give us a place to put those side effects. Some of that may live inside components, but some may need to live outside the UI layer. Redux reducers must not contain side effects, but real applications require logic that has side effects. This logic can include side effects, such as async requests or generating random values, as well as logic that requires dispatching multiple actions or access to the Redux store state. Thunks allow us to write additional Redux-related logic separate from a UI layer. Instead, they are passed to store.dispatch():
Thunk functions are not directly called by application code. Writing Thunks Ī thunk function is a function that accepts two arguments: the Redux store dispatch method, and the Redux store getState method. However, they can be used for a variety of tasks, and can contain both synchronous and asynchronous logic. Thunks are the standard approach for writing async logic in Redux apps, and are commonly used for data fetching. Using thunks requires the redux-thunk middleware to be added to the Redux store as part of its configuration.
#Reduxjs toolkit thunk code#
Rather than execute some logic now, we can write a function body or code that can be used to perform the work later.įor Redux specifically, "thunks" are a pattern of writing functions with logic inside that can interact with a Redux store's dispatch and getState methods. The word "thunk" is a programming term that means "a piece of code that does some delayed work". Techniques for writing sync and async logic in thunks.What "thunks" are, and why they're used for writing Redux logic.
0 kommentar(er)
