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
12
votes
1 answer

Nextjs redux, thunk and getInitialProps - how to implement

I want to use nextjs in my new project with redux and thunk also. I wondering how to implement all packages correctly. In my previous projects pages has HOC components like: import {connect} from 'react-redux'; import Page from './about'; import…
marczak
  • 489
  • 2
  • 8
  • 17
12
votes
4 answers

Redux-thunk dispatch an action and wait for re-render

import React from "react"; import { render } from "react-dom"; import { createStore, applyMiddleware } from "redux"; import { Provider, connect } from "react-redux"; import thunk from "redux-thunk"; const disabled = (state = true, action) => { …
Avery235
  • 4,756
  • 12
  • 49
  • 83
12
votes
4 answers

Which should be simpler, actions or reducers?

This is one way of writing actions when using thunk, which results in reducers that are very simple. getCurrentUserPicture(){ return (dispatch,getState) => { dispatch({type: "isloading", isLoading: true}); // shows a loading…
Baz
  • 12,713
  • 38
  • 145
  • 268
11
votes
2 answers

You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore(). nextjs redux?

I am facing error with using redux toolkit with next js. I facing this lagacy warning- /!\ You are using legacy implementaion. Please update your code: use createWrapper() and wrapper.useWrappedStore(). I am not understanding where actually problem…
Md Ali
  • 217
  • 1
  • 2
  • 10
11
votes
1 answer

React and Redux: Managing Redux Custom Middleware List

For my react app, I have built many custom middlewares and passed them in the applyMiddleware(). Because I have so many, the redux store file is looking a little congested. Is it a good practice to pass them all in the applyMiddleware() or import…
tim_woods
  • 417
  • 2
  • 16
11
votes
1 answer

Argument of type '(dispatch: Dispatch) => void' is not assignable to parameter of type 'AnyAction'

The error itself: (alias) deleteCategory(id: number): (dispatch: Dispatch) => void import deleteCategory Argument of type '(dispatch: Dispatch) => void' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in…
Adil Akhmetov
  • 121
  • 1
  • 1
  • 7
11
votes
1 answer

Returning a promise in a Redux thunk with typescript

I am getting this typescript error: Property 'then' does not exist on type 'ThunkAction, IinitialState, undefined, any>'. Please help! How I have configured my store and included the type: return createStore( …
jfbloom22
  • 804
  • 7
  • 21
11
votes
4 answers

how to setstate after saga async request

I'm using redux-saga in my project. I used redux-thunk before, so i can't setState ends of some async request. like this.props.thunkAsync() .then(){ this.setState({ '' }); } Since thunk returns promise, i could use 'then'. But i can't do…
godsenal
  • 387
  • 2
  • 12
11
votes
2 answers

Reducing redux-thunk boilerplate

When writing redux-thunk functions, known as thunks there is allot of boilerplate that could be easily abstracted away. For example in most of our async API calls we are doing the following, without any side-effects: export const LOGIN_REQUEST =…
AndrewMcLagan
  • 13,459
  • 23
  • 91
  • 158
11
votes
2 answers

Where is the sensible place to modify response data in redux?

Using a combination of React, Redux and Thunk, I have the following: actions.js import $ from 'jquery'; import * as types from '../constants/ActionTypes'; import { API_PATH } from '../constants/Config'; export function coursesLoaded(courses) { …
Chris
  • 54,599
  • 30
  • 149
  • 186
10
votes
3 answers

Is it possible to await for dispatch is finish

I have 2 actions, and I call from the first action to the second action .... and I need to wait until the second action is finished and only then continue with the action. // first action export const getDataFromAdmin = () => { return async…
aharon vishinsky
  • 209
  • 1
  • 3
  • 11
10
votes
1 answer

How to write tests ( Jest + Enzyme ) for extraReducers of createSlice ()?

I have started to create my application using @reduxjs/toolkit and kind of got stuck. I find no resource anywhere which can guide me with how to unit tests the logic in extraReducers. Any help would be appreciable. Example: Example: const fetchList…
Anand Garg
  • 124
  • 1
  • 8
10
votes
2 answers

How to refresh JWT tokens in React.js Application?

I checked all the similar questions here but none has what I need. I'm securing the routs in my App and sending the JWT with every request and everything is fine here. The issue is when the JWT expires, instead of logging out the user, I need to…
Ruby
  • 2,207
  • 12
  • 42
  • 71
10
votes
1 answer

MapDispatchToProps causes Typescript Error in parent-component, expecting Actions to be passed as props

In my child component I am defining MapDispatchToProps, pass them into connect and accordingly define an interface PropsFromDispatch that is extended in React.Component Props Interface. Now in my parent component Typescript is telling me that it is…
Leon vdb
  • 162
  • 2
  • 9
10
votes
1 answer

how to apply redux developer tools with reduxThunk

here is my code import React from "react"; import ReactDOM from "react-dom"; import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import "normalize.css/normalize.css" import …
zulqarnain
  • 1,536
  • 4
  • 26
  • 44