11. How can you use getState and dispatch inside a thunk?

Question

Accepted Answer

In Redux Toolkit, thunks have access to both getState and dispatch through the second argument of the payload creator function. These allow you to read the current state or dispatch other actions while performing asynchronous logic inside a thunk. **1. Access getState:** Use getState() to retrieve the latest Redux store state and make decisions based on it. **2. Use dispatch:** You can dispatch other thunks or regular actions within the same thunk to manage flow or update the state. **3. Combine both:** Read state values and conditionally trigger actions based on them for advanced control. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchPostsIfNeeded = createAsyncThunk(
  'posts/fetchPostsIfNeeded',
  async (_, { getState, dispatch }) => {
    const state = getState();
    const { lastFetched } = state.posts;

// Check if data was fetched recently (e.g., within 5 minutes)
    const shouldFetch = !lastFetched || Date.now() - lastFetched > 5 * 60 * 1000;

if (shouldFetch) {
      const response = await fetch('/api/posts');
      const data = await response.json();
      return data;
    } else {
      // Optionally dispatch another action
      dispatch({ type: 'posts/fetchSkipped' });
      return []; // Return empty array or cached data
    }
  }
);

11. How can you use getState and dispatch inside a thunk?

Using getState and dispatch Inside a Thunk in Redux Toolkit

11. How can you use getState and dispatch inside a thunk?

Using getState and dispatch Inside a Thunk in Redux Toolkit

Scenario Questions

Follow-up Questions