![]() 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. 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". ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |