Redux thunk , Connect ,ApplyMiddlerware ,

2
votes
  • Could you please more elaborate into the following questions ?? 1 - react-redux is already provides the connect(mapStateToProps, mapDispatchToProps), Then why there is use of middleware and redux-thunk,As per my
    understanding this connect function would suffice to get the state from the store and dispatching the events from the component?
1
reduxreact-redux

1 Answers

1
votes

With plain Redux functionality, your action creators must be plain object and hence you cannot make async calls in action creators or dispatch multiple actions from one action creators, middlewares are useful here

According to the docs:

Middleware is the suggested way to extend Redux with custom functionality. Middleware lets you wrap the store's dispatch method for fun and profit. The key feature of middleware is that it is composable. Multiple middleware can be combined together, where each middleware requires no knowledge of what comes before or after it in the chain.

The most common use case for middleware is to support asynchronous actions without much boilerplate code or a dependency on a library like Rx. It does so by letting you dispatch async actions in addition to normal actions.

redux-thunk lets the action creators invert control by dispatching functions. They would receive dispatch as an argument and may call it asynchronously. Such functions are called thunks. Another example of middleware is redux-promise. It lets you dispatch a Promise async action, and dispatches a normal action when the Promise resolves.

You might look at the following example to understand how to use redux-thunk to make async calls