Redux logo

Redux

Predictable state container for JavaScript apps

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.
Redux is a tool in the State Management Library category of a tech stack.
Redux is an open source tool with GitHub stars and GitHub forks. Here’s a link to Redux's open source repository on GitHub

Who uses Redux?

Companies
2383 companies reportedly use Redux in their tech stacks, including Instagram, Amazon, and Robinhood.

Developers
26611 developers on StackShare have stated that they use Redux.

Redux Integrations

JavaScript, React, React Redux, redux-thunk, and redux-saga are some of the popular tools that integrate with Redux. Here's a list of all 24 tools that integrate with Redux.
Pros of Redux
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
Decisions about Redux

Here are some stack decisions, common use cases and reviews by companies and developers who chose Redux in their tech stack.

Cyril Duchon-Doris
Shared insights
on
RollbarRollbar
at

After splitting our monolith into a Rails API + a React Redux.js frontend app, it became a necessity to monitor frontend errors. Our frontend application is not your typical website, and features a lot of interesting SPA mechanics that need to be followed closely (many async flows, redux-saga , etc.) in addition to regular browser incompatibility issues. Rollbar kicks in so that we can monitor every bug that happens on our frontend, and aggregate this with almost 0 work. The number of occurrences and affected browsers on each occurence helps us understand the priority and severity of bugs even when our users don't tell us about them, so we can decide whether we need to fix this bug that was encountered by 1k users in less than a few days days VERSUS telling this SINGLE user to switch browsers because he's using a very outdated version that no one else uses. Now we also use Rollbar with Rails, Sidekiq and even AWS Lambda errors since the interface is quite convenient.

See more
Shared insights
at

I'm working as one of the engineering leads in RunaHR. As our platform is a Saas, we thought It'd be good to have an API (We chose Ruby and Rails for this) and a SPA (built with React and Redux ) connected. We started the SPA with Create React App since It's pretty easy to start.

We use Jest as the testing framework and react-testing-library to test React components. In Rails we make tests using RSpec.

Our main database is PostgreSQL, but we also use MongoDB to store some type of data. We started to use Redis  for cache and other time sensitive operations.

We have a couple of extra projects: One is an Employee app built with React Native and the other is an internal back office dashboard built with Next.js for the client and Python in the backend side.

Since we have different frontend apps we have found useful to have Bit to document visual components and utils in JavaScript.

See more
Shared insights
at

Repost

Overview: To put it simply, we plan to use the MERN stack to build our web application. MongoDB will be used as our primary database. We will use ExpressJS alongside Node.js to set up our API endpoints. Additionally, we plan to use React to build our SPA on the client side and use Redis on the server side as our primary caching solution. Initially, while working on the project, we plan to deploy our server and client both on Heroku . However, Heroku is very limited and we will need the benefits of an Infrastructure as a Service so we will use Amazon EC2 to later deploy our final version of the application.

Serverside: nodemon will allow us to automatically restart a running instance of our node app when files changes take place. We decided to use MongoDB because it is a non relational database which uses the Document Object Model. This allows a lot of flexibility as compared to a RDMS like SQL which requires a very structural model of data that does not change too much. Another strength of MongoDB is its ease in scalability. We will use Mongoose along side MongoDB to model our application data. Additionally, we will host our MongoDB cluster remotely on MongoDB Atlas. Bcrypt will be used to encrypt user passwords that will be stored in the DB. This is to avoid the risks of storing plain text passwords. Moreover, we will use Cloudinary to store images uploaded by the user. We will also use the Twilio SendGrid API to enable automated emails sent by our application. To protect private API endpoints, we will use JSON Web Token and Passport. Also, PayPal will be used as a payment gateway to accept payments from users.

Client Side: As mentioned earlier, we will use React to build our SPA. React uses a virtual DOM which is very efficient in rendering a page. Also React will allow us to reuse components. Furthermore, it is very popular and there is a large community that uses React so it can be helpful if we run into issues. We also plan to make a cross platform mobile application later and using React will allow us to reuse a lot of our code with React Native. Redux will be used to manage state. Redux works great with React and will help us manage a global state in the app and avoid the complications of each component having its own state. Additionally, we will use Bootstrap components and custom CSS to style our app.

Other: Git will be used for version control. During the later stages of our project, we will use Google Analytics to collect useful data regarding user interactions. Moreover, Slack will be our primary communication tool. Also, we will use Visual Studio Code as our primary code editor because it is very light weight and has a wide variety of extensions that will boost productivity. Postman will be used to interact with and debug our API endpoints.

See more
Michael Urresta
Developer at Devonauts · | 5 upvotes · 76.1K views
Needs advice
on
Android StudioAndroid StudioReactReact
and
SwiftSwift

Hey everyone, I am a new self-taught developer and have some questions regarding apps. I apologize in advance if the question is too obvious or simple.

I am currently trying to build an app for a local supermarket as a way to get experience in the development world. The app needs to pull data from a MySQL database that the owner has through GoDaddy. It also needs to have an admin panel.

Problem: I have the app ready, and it works using Firebase. I also have the admin panel built with React and Redux. However, I have no idea how to integrate the app with the Admin Panel. Can somebody please mentor me in this case?

Thanks.

See more

Server side

We decided to use Python for our backend because it is one of the industry standard languages for data analysis and machine learning. It also has a lot of support due to its large user base.

  • Web Server: We chose Flask because we want to keep our machine learning / data analysis and the web server in the same language. Flask is easy to use and we all have experience with it. Postman will be used for creating and testing APIs due to its convenience.

  • Machine Learning: We decided to go with PyTorch for machine learning since it is one of the most popular libraries. It is also known to have an easier learning curve than other popular libraries such as Tensorflow. This is important because our team lacks ML experience and learning the tool as fast as possible would increase productivity.

  • Data Analysis: Some common Python libraries will be used to analyze our data. These include NumPy, Pandas , and matplotlib. These tools combined will help us learn the properties and characteristics of our data. Jupyter notebook will be used to help organize the data analysis process, and improve the code readability.

Client side

  • UI: We decided to use React for the UI because it helps organize the data and variables of the application into components, making it very convenient to maintain our dashboard. Since React is one of the most popular front end frameworks right now, there will be a lot of support for it as well as a lot of potential new hires that are familiar with the framework. CSS 3 and HTML5 will be used for the basic styling and structure of the web app, as they are the most widely used front end languages.

  • State Management: We decided to use Redux to manage the state of the application since it works naturally to React. Our team also already has experience working with Redux which gave it a slight edge over the other state management libraries.

  • Data Visualization: We decided to use the React-based library Victory to visualize the data. They have very user friendly documentation on their official website which we find easy to learn from.

Cache

  • Caching: We decided between Redis and memcached because they are two of the most popular open-source cache engines. We ultimately decided to use Redis to improve our web app performance mainly due to the extra functionalities it provides such as fine-tuning cache contents and durability.

Database

  • Database: We decided to use a NoSQL database over a relational database because of its flexibility from not having a predefined schema. The user behavior analytics has to be flexible since the data we plan to store may change frequently. We decided on MongoDB because it is lightweight and we can easily host the database with MongoDB Atlas . Everyone on our team also has experience working with MongoDB.

Infrastructure

  • Deployment: We decided to use Heroku over AWS, Azure, Google Cloud because it is free. Although there are advantages to the other cloud services, Heroku makes the most sense to our team because our primary goal is to build an MVP.

Other Tools

  • Communication Slack will be used as the primary source of communication. It provides all the features needed for basic discussions. In terms of more interactive meetings, Zoom will be used for its video calls and screen sharing capabilities.

  • Source Control The project will be stored on GitHub and all code changes will be done though pull requests. This will help us keep the codebase clean and make it easy to revert changes when we need to.

See more
Needs advice
on
CalendlyCalendlyReactReact
and
ReduxRedux

Hello,

I am trying to bring in an efficient calendar API that allows multiple users to book meeting with 1 or 100s clients. If a client signs up for a meeting on an available slot, the appointment will show on both users' calendars and within the app.

I can't decide on how I should seamlessly implement this in my platform due to so many options. I'm building an experimental MVP so I need to keep the costs down. My application is in React + Redux. I need full control over the UI Visual Design. The calendar must also sync to 3rd party services such as Google Calendar.

Looking at these services or libraries to help speed up implementation:

Any advice?? :)

See more

Blog Posts

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

LogRocket

JavaScriptReactAngularJS+8
5
2002
JavaScriptGitHubNode.js+29
14
13617
GitHubPythonReact+42
49
40897
GitHubPythonNode.js+47
55
72725

Redux's Features

  • Predictable state
  • Easy testing
  • Works with other view layers besides React

Redux Alternatives & Comparisons

What are some alternatives to 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

Redux's Followers
23244 developers follow Redux to keep up with related blogs and decisions.