Stack Overflow
Stack Overflow

Questions tagged [redux-thunk]

Thunk middleware for Redux. Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState() as parameters.

Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methods dispatch and getState() as parameters.

Related tags

2622 questions
897
votes
13 answers

Why do we need middleware for async flow in Redux?

According to the docs, "Without middleware, Redux store only supports synchronous data flow". I don't understand why this is the case. Why can't the container component call the async API, and then dispatch the actions? For example, imagine a…
Stas Bichenko
  • 13,013
  • 8
  • 45
  • 83
576
votes
11 answers

Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await

There is a lot of talk about the latest kid in redux town right now, redux-saga/redux-saga. It uses generator functions for listening to/dispatching actions. Before I wrap my head around it, I would like to know the pros/cons of using redux-saga…
hampusohlsson
  • 10,109
  • 5
  • 33
  • 50
103
votes
3 answers

What is the difference between redux-thunk and redux-promise?

As far as I know and correct me if I am wrong, redux-thunk is a middleware which helps us dispatch async function and debug values in the action itself while when I used redux-promise I couldn't create async functions without implementing my own…
shet_tayyy
  • 5,366
  • 11
  • 44
  • 82
87
votes
2 answers

How to listen for specific property changes in Redux store after an action is dispatched

I am currently trying to conceptualize how to handle dispatching an action in a component based on a data change after a dispatch in another component. Take this scenario: dispatch(someAjax) -> property in state updates. After this, I need another…
Jazzy
  • 6,029
  • 11
  • 50
  • 74
77
votes
7 answers

How to add multiple middleware to Redux?

I have one piece of middleware already plugged in, redux-thunk, and I'd like to add another, redux-logger. How do I configure it so my app uses both pieces of middleware? I tried passing in an array of [ReduxThunk, logger] but that didn't…
doctopus
  • 5,349
  • 8
  • 53
  • 105
77
votes
5 answers

how to async/await redux-thunk actions?

action.js export function getLoginStatus() { return async(dispatch) => { let token = await getOAuthToken(); let success = await verifyToken(token); if (success == true) { dispatch(loginStatus(success)); } else { …
nabeel
  • 1,181
  • 2
  • 10
  • 24
77
votes
5 answers

return promise from store after redux thunk dispatch

I am trying to chain dispatches with redux thunk function simple_action(){ return {type: "SIMPLE_ACTION"} } export function async_action(){ return function(dispatch, getState){ return dispatch(simple_action).then(()=>{...}); } } How do I…
l2silver
  • 3,283
  • 6
  • 23
  • 28
58
votes
3 answers

How to use Redux-Thunk with Redux Toolkit's createSlice?

I have come across Redux Toolkit (RTK) and wanting to implement further functionality it provides. My application dispatches to reducers slices created via the createSlice({}) (see createSlice api docs) This so far works brilliantly. I can easily…
Jcov
  • 2,122
  • 2
  • 21
  • 32
51
votes
2 answers

React-Redux: Combining reducers: Unexpected Keys

My app works fine before I start to combine my Redux reducers. But when I combine, the initialState and reducer keys get mixed up. function flash(state = [], action) { switch (action.type) { case FLASH_MESSAGE_UPDATED: return _.extend({},…
steel
  • 11,883
  • 7
  • 72
  • 109
41
votes
1 answer

Is using getState in a Redux Thunk good practice?

I have seen conflicting (or just confusing, to me) answers in other questions here regarding whether using getState within an action is acceptable, or not, and I have seen quite a few times it being called an anti-pattern. For me, it seems to work…
spunge
  • 2,827
  • 3
  • 14
  • 12
39
votes
10 answers

TypeError: middleware is not a function

I'm trying to apply redux in my reactjs app. I can't proceed because of these errors: I'm sure that I already installed all the dependencies that I need. Here is a relevant part of my package.json "dependencies": { "react-redux": "^5.0.6", …
James Solomon Belda
  • 936
  • 1
  • 7
  • 14
37
votes
1 answer

Why use redux-thunk?

I don't understand the need for something like redux-thunk. From what I understand a thunk is a function which returns a function. The wrapped expressions and the use of middleware appear to me to do more to obfuscate what is happening. Taken from…
micahblu
  • 4,924
  • 5
  • 27
  • 33
36
votes
12 answers

Argument of type 'AsyncThunkAction' is not assignable to parameter of type 'AnyAction'

store.ts export const store = configureStore({ reducer: { auth: authReducer }, middleware: [], }); export type AppDispatch = typeof store.dispatch; export type RootState = ReturnType; hooks.ts export…
Lun
  • 861
  • 1
  • 10
  • 18
33
votes
4 answers

Async actions in Redux

I have a React App, I need to make an ajax call (in order to learn) to a online service (async) with Redux. This is my store: import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import duedates from…
Pablo
  • 9,424
  • 17
  • 55
  • 78
32
votes
2 answers

Getting warning message 'getDefaultMiddleware' is deprecated

I am getting a getDefaultMiddleware is deprecated warning after updating "@reduxjs/toolkit": "^1.6.1" So how should I remove this warning. Do we have any other way to inject default middleware in the configureStore function? import { configureStore,…
TheParam
  • 10,113
  • 4
  • 40
  • 51
1
2 3
…
99 100