#Redux book code#
#Redux book series#

#Redux book series#

Redux middleware are all written as a series of 3 nested functions: To start, let's review how Redux middleware work in general. If you need to add the thunk middleware to a store manually, that can be done by passing the thunk middleware to applyMiddleware() as part of the setup process. The Redux Toolkit configureStore API automatically adds the thunk middleware during store creation, so it should typically be available with no extra configuration needed.

Redux Thunk Middleware ĭispatching thunk functions requires that the redux-thunk middleware has been added to the Redux store as part of its configuration. Thunks are best used for complex synchronous logic, and simple to moderate async logic such as making a standard AJAX request and dispatching actions based on the request results. So, they should not generally be used for initializing persistent connections like websockets, and you can't use them to respond to other actions. They also cannot see other dispatched actions. Thunks are 'one-shot' functions, with no sense of a lifecycle.

Writing logic that needs access to getState to make decisions or include other state values in an action.

Writing logic that needs to dispatch multiple actions in a row or over time.

Making async requests or other async logic.

Thunk Use Cases īecause thunks are a general-purpose tool that can contain arbitrary logic, they can be used for a wide variety of purposes. However, thunks have access to getState, which components do not, and there's still value in moving that logic outside of components. This does mean that it's possible to have more logic directly inside of a component, such as an async fetch + dispatch of the results. The community has switched away from the 'container/presentational' pattern in general, and components now have access to dispatch directly via the useDispatch hook. With the arrival of the React-Redux hooks API, that situation has changed. Since components typically did not have access to dispatch internally, passing thunks to connect made it possible for components to just call (), without needing to know if it was a callback from a parent, dispatching a plain Redux action, dispatching a thunk performing sync or async logic, or a mock function in a test. The connect API allowed passing action creators and 'binding' them to automatically dispatch actions when called. Historically, another reason to use thunks was to help keep React components 'unaware of Redux'. Detailed Explanation: Thunks, Connect, and 'Container Components' This keeps the logic from being bound to any specific Redux store instance and keeps it reusable.

#Redux book code#

In a sense, a thunk is a loophole where you can write any code that needs to interact with the Redux store, ahead of time, without needing to know which Redux store will be used. This may be done to improve testability of the logic, to keep the UI layer as thin and 'presentational' as possible, or to improve code reuse and sharing. However, it's often necessary to move as much of that logic as possible outside the UI layer. 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 a 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. 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.