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;
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'
}
}