How to use createThunkAsync without createSlice

Question

I have a simple reducer. Which I use in combineReducers and then in createStore. I would like to work with async thunks a little bit to fetch data using axios. What I don't see nowhere is how to use thunk without createSlice functions. Can you point me somewhere or explain?

import { createAction } from '@reduxjs/toolkit'

export const setMyData = createAction('myData/setMyData')

export const initialState = {
    myData: []
};

const myDataReducer = (state = initialState, action) => {
    switch (action.type) {
        case setMyData.type:
            return {
                ...state,
                myData: action.payload
            };
        default:
            return { ...state };
    }
};

export default myDataReducer;

Answer 1

The first argument of createAsyncThunk function is type will generate action types. You can use these action types in the reducer function.

For example, a type argument of 'data/getPostById' will generate these action types:

• pending: 'data/getPostById/pending'
• fulfilled: 'data/getPostById/fulfilled'
• rejected: 'data/getPostById/rejected'

E.g.

import { combineReducers, configureStore, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const getPostById = createAsyncThunk('data/getPostById', () => {
  return axios.get(`https://jsonplaceholder.typicode.com/posts/1`).then((res) => res.data);
});

const postReducer = (state = {}, action) => {
  switch (action.type) {
    case 'data/getPostById/fulfilled':
      return action.payload;
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  post: postReducer,
});

const store = configureStore({ reducer: rootReducer });
store.subscribe(() => {
  console.log(store.getState());
});
store.dispatch(getPostById());

Output:

{ post: {} }
{
  post: {
    userId: 1,
    id: 1,
    title: 'sunt aut facere repellat provident occaecati excepturi optio reprehenderit',
    body: 'quia et suscipit\n' +
      'suscipit recusandae consequuntur expedita et cum\n' +
      'reprehenderit molestiae ut ut quas totam\n' +
      'nostrum rerum est autem sunt rem eveniet architecto'
  }
}