Possibly it’s not actual and the question is outdated, but there is thunkAPI as second parameter in payload creator of createAsyncThunk, so it can be used like so export const updateData = createAsyncThunk(‘data/update’, async (params, {dispatch}) => { const result = await sdkClient.update({ params }) dispatch(getData()) return result })
The createAsyncThunk can have the types defined on the generics: export const unsubscribeMeta = createAsyncThunk<apiUnsubscribeResponse, void, {state: RootState }>( ‘meta/unsubscribe’, async (_, { getState }) => { const { meta } = getState(); const res = await client.post<apiUnsubscribeResponse>( `/meta/unsubscribe/${meta.subscriptionId}` ); return res.data.data; } ); Defining the state will automatically make the getState be aware of … Read more
I think you should be using compose function, so it’s like import { createStore, applyMiddleware, compose } from ‘redux’; import thunk from ‘redux-thunk’; import duedates from ‘./reducers/duedates’ export default compose(applyMiddleware(thunk))(createStore)(duedates); Thunk allows an action creator to return a function instead of plain-object, so you use it like export function getDueDates() { return dispatch => { … Read more
The middleware option in configureStore accepts a callback function, and that callback will be given getDefaultMiddleware as its argument: const store = configureStore({ reducer: rootReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger), }) Use that instead of the separately imported version.
I faced the same issue, for me it was just solved by adding AppDispatch to the type of useDispatch hook; const dispatch = useDispatch<AppDispatch>(); useEffect(() => { dispatch(getUsers()); }, []); getUsers() was my createAsyncThunk function
Redux Thunk teaches Redux to recognize special kinds of actions that are in fact functions. When an action creator returns a function, that function will get executed by the Redux Thunk middleware. This function doesn’t need to be pure; it is thus allowed to have side effects, including executing asynchronous API calls. The function can … Read more
According to the docs you are mixing up the usage of redux-logger You either need to import the specific createLogger function import { createLogger } from ‘redux-logger’ const logger = createLogger({ // …options }); Or use the default import import logger from ‘redux-logger’ And then your code should be fine const store = createStore( reducers, … Read more
I wrote an extended blog post called Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability, which addresses this topic in detail. In it, I respond to several critiques of thunks and use of getState (including Dan Abramov’s comments in Accessing Redux state in an action creator?). In fact, my post was specifically inspired by … Read more
I think you simply need to add reducers for the additional keys, e.g. function one(state = {}, action) { switch (action.type) { case ONE_UPDATED: return action.one default: return state } } From the docs: If you produced reducer with combineReducers, this must be a plain object with the same shape as the keys passed to … Read more
I’m a Redux maintainer and creator of Redux Toolkit. FWIW, nothing about making async calls with Redux changes with Redux Toolkit. You’d still use an async middleware (typically redux-thunk), fetch data, and dispatch actions with the results. As of Redux Toolkit 1.3, we do have a helper method called createAsyncThunk that generates the action creators … Read more