Closed ArzunDhz closed 10 months ago
import { createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import logger from "redux-logger"; import axios from "axios";
const store = createStore( reducer, applyMiddleware(logger.default, thunk.default) );
const postLoading ="postLoading"; const postLoaded ="postLoaded"; const postFetchingFailed ="postFetchingFailed";
setTimeout(() => { store.dispatch(fetchdata(1)); }, 2000);
function fetchdata(user) { return async (dispatch, getState) => { const { data } = await axios.get( https://jsonplaceholder.typicode.com/posts/${user} ); dispatch(isPostLoaded(data)); }; }
https://jsonplaceholder.typicode.com/posts/${user}
function isPostLoaded(value) { return {type: postLoaded , payload:value } }
function reducer( state = { user: 1, id: 1, title: "", body: "", error: "", pending: false },action) { switch (action.type) { case postLoaded: return { user: action.payload.user, id: action.payload.id, title: action.payloadtitle, pending: false, }; case postLoading: return { ...state, pending: true }; case postFetchingFailed: return { ...state, pending: false }; default: return state; } }
you don't seem to be using Redux Toolkit at all, here - why raise an issue in the RTK repo?
import { createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; import logger from "redux-logger"; import axios from "axios";
const store = createStore( reducer, applyMiddleware(logger.default, thunk.default) );
const postLoading ="postLoading"; const postLoaded ="postLoaded"; const postFetchingFailed ="postFetchingFailed";
setTimeout(() => { store.dispatch(fetchdata(1)); }, 2000);
function fetchdata(user) { return async (dispatch, getState) => { const { data } = await axios.get(
https://jsonplaceholder.typicode.com/posts/${user}
); dispatch(isPostLoaded(data)); }; }function isPostLoaded(value) { return {type: postLoaded , payload:value } }
function reducer( state = { user: 1, id: 1, title: "", body: "", error: "", pending: false },action) { switch (action.type) { case postLoaded: return { user: action.payload.user, id: action.payload.id, title: action.payloadtitle, pending: false, }; case postLoading: return { ...state, pending: true }; case postFetchingFailed: return { ...state, pending: false }; default: return state; } }