Need advice about which tool to choose?Ask the StackShare community!

redux-thunk

747
182
+ 1
6
Redux

30.3K
23.1K
+ 1
674
Add tool

Redux vs redux-thunk: What are the differences?

Introduction

In this Markdown document, we will discuss the key differences between Redux and redux-thunk, two popular JavaScript libraries used in web development.

  1. Store Management Approach: Redux is a predictable state container, while redux-thunk is a middleware that allows handling of asynchronous actions in Redux. Redux follows a strict unidirectional data flow, where actions trigger state changes through reducers and the changes are propagated to the components. On the other hand, redux-thunk allows the use of asynchronous actions by intercepting dispatched actions and delaying their execution, making it easier to handle side effects like API calls.

  2. Action Structure and Behavior: Redux actions are usually plain JavaScript objects with a type property and optional payload. These actions are dispatched directly to the store, which triggers the corresponding state changes. In contrast, redux-thunk actions can be functions that dispatch regular actions asynchronously. These thunk actions have access to the store's dispatch and getState methods, allowing them to dispatch regular actions based on certain conditions or perform other tasks before dispatching.

  3. Middleware Integration: Redux does not require any additional middleware to work properly, but it can be enhanced with middleware like redux-logger or redux-thunk. Redux-thunk, on the other hand, is a middleware itself and needs to be explicitly integrated into Redux by using the applyMiddleware function from the Redux library. This allows Redux to process the thunk actions and handle the asynchronous behavior.

  4. Ease of Use: Redux is relatively simple and straightforward, making it easier for developers to understand and implement. It follows a minimalistic approach with a single store and pure functions as reducers, promoting a more predictable and testable codebase. Redux-thunk, while not overly complex, adds an extra layer of abstraction with thunk actions and middleware setup. This can slightly increase the learning curve and boilerplate code, especially for beginners or smaller projects.

  5. Testing: Testing Redux applications can be easier due to its pure functions and predictable data flow. Reducers can be tested by passing different actions and asserting the resulting state changes. Similarly, action creators can be tested by directly invoking them with different inputs. However, testing redux-thunk actions requires additional setup using a tool like redux-mock-store to mock the store and simulate the dispatch behavior. This adds complexity to the testing process, making it slightly more cumbersome compared to testing pure Redux code.

  6. Community and Ecosystem: Redux has gained significant popularity over the years and has a large and active community. It is widely adopted and has an extensive ecosystem of third-party libraries, tools, and resources to support developers. Redux-thunk, being an extension of Redux, benefits from the same community and ecosystem. However, it is worth noting that there are other alternatives to redux-thunk, such as redux-saga or redux-promise, which offer different approaches to handling asynchronous actions in Redux.

In summary, Redux is a predictable state container, while redux-thunk is a middleware that enables handling of asynchronous actions in Redux. Redux follows a strict unidirectional data flow, while redux-thunk adds an extra layer of abstraction with thunk actions and middleware setup. Redux has a simpler and more minimalistic approach, making it easier to understand and implement. Testing Redux applications can be easier compared to testing redux-thunk actions. Both Redux and redux-thunk benefit from a large and active community.

Get Advice from developers at your company using StackShare Enterprise. Sign up for StackShare Enterprise.
Learn More
Pros of redux-thunk
Pros of Redux
  • 6
    Easy
  • 191
    State is predictable
  • 150
    Plays well with React and others
  • 126
    State stored in a single object tree
  • 79
    Hot reloading out of the box
  • 74
    Allows for time travel
  • 14
    You can log everything
  • 12
    Great tutorial direct from the creator
  • 7
    Endorsed by the creator of Flux
  • 7
    Test without browser
  • 6
    Easy to debug
  • 3
    Enforces one-way data flow
  • 3
    Granular updates
  • 2
    Blabla

Sign up to add or upvote prosMake informed product decisions

Cons of redux-thunk
Cons of Redux
    Be the first to leave a con
    • 13
      Lots of boilerplate
    • 6
      Verbose
    • 5
      Steep learning curve
    • 5
      Design
    • 4
      Steeper learning curve than RxJs
    • 4
      Steeper learning curve than MobX

    Sign up to add or upvote consMake informed product decisions

    - No public GitHub repository available -

    What is redux-thunk?

    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.

    What is Redux?

    It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. t provides a great experience, such as live code editing combined with a time traveling debugger.

    Need advice about which tool to choose?Ask the StackShare community!

    Jobs that mention redux-thunk and Redux as a desired skillset
    What companies use redux-thunk?
    What companies use Redux?
    See which teams inside your own company are using redux-thunk or Redux.
    Sign up for StackShare EnterpriseLearn More

    Sign up to get full access to all the companiesMake informed product decisions

    What tools integrate with redux-thunk?
    What tools integrate with Redux?

    Sign up to get full access to all the tool integrationsMake informed product decisions

    Blog Posts

    JavaScriptGitHubReact+12
    5
    4153
    Oct 11 2019 at 2:36PM

    LogRocket

    JavaScriptReactAngularJS+8
    5
    1983
    JavaScriptGitHubNode.js+29
    14
    13522
    GitHubPythonReact+42
    49
    40811
    GitHubPythonNode.js+47
    55
    72496
    What are some alternatives to redux-thunk and Redux?
    Cycle.js
    A functional and reactive JavaScript framework for predictable code
    MobX
    MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
    Flux
    Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.
    React
    Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.
    RxJS
    RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code. This project is a rewrite of Reactive-Extensions/RxJS with better performance, better modularity, better debuggable call stacks, while staying mostly backwards compatible, with some breaking changes that reduce the API surface.
    See all alternatives