Tengo un reductor simple. Que uso en combineReducers y luego en createStore. Me gustaría trabajar un poco con procesadores asíncronos para obtener datos usando axios. Lo que no veo en ninguna parte es cómo usar thunk sin las funciones createSlice. ¿Puedes señalarme algún lugar o explicarme?
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;El primer argumento de la función createAsyncThunk es type generará tipos de acción. Puede utilizar estos tipos de acción en la función de reducción.
Por ejemplo, un argumento de tipo de 'data/getPostById' generará estos tipos de acción:
pending: 'data/getPostById/pending'fulfilled: 'data/getPostById/fulfilled'rejected: 'data/getPostById/rejected'P.ej
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());Producción:
{ 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' } }