This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
Redux Toolkit 2.0 release
This change is considered a major version of the library and comes with breaking changes because, as the core team declared, it has been 4+ years since they released Redux tool kit...
Mar 8, 2024
3 mins
How to Contribute to Redux with Mark Erikson
We are kicking off a brand new series of videos in 2022 to help developers learn how they can contribute code to some of the world’s most popular JavaScript frameworks and technologies. Subscribe to This Dot Media’s Youtube Channel. For those interested in React state management, I sat down with Mark Erikson, maintainer of Redux recently! If you would like to check out that interview, you can see it here. What is Redux? Redux is an open source JavaScript library that helps developers manage and centralize global state in their large-scale applications. By wrapping state in a store, you can alert all code that subscribes to the store of updates to the state. Mark Erikson Mark Erikson started contributing to Redux in 2016. After working with JavaScript and Backbone for years, Mark began learning React and Redux, which eventually led him to a chat channel called Reactiflux. While hanging out on these channels, he noticed a ton of people asking the same questions, which inspired him to volunteer to write an FAQ page for the Redux project. Shortly after, Redux co-creator Dan Abramov gave Mark commit rights to the repository, allowing him to triage issues and answer questions. This goes to show anyone can contribute to open source - you just need to get started! What to Know Before You Get Started Before jumping into contributing to Redux, it's important to know a few key things about the repository: - There are three primary repositories within the Redux org. These include redux-core, react-redux, and redux-toolkit. - Redux-toolkit is how the team wants people to use Redux today and where the bulk of the open source work is taking place. - Each repository is structured similarly, so once you understand one, it'll be easy to understand the other two! First Steps for Contributing Since most of the work is taking place in redux-toolkit, new developers will find that it is the most active. In fact, new contributors can learn more, and even help out by reading and responding to questions in the discussions tab located in redux-toolkit as a way to start contributing easily. Redux-toolkit also has many open issues that developers can work on or triage! Developers can help by reproducing bugs or by editing and adding to documentation. If you're interested in helping in redux-core, Mark is looking for TypeScript experts who are interested in reviewing types! If you are interested in contributing but need a little additional guidance, Mark invites you to reach out to him with your questions and he will do his best to get back to you! Good luck contributing, and we hope you have fun submitting your first PR to Redux!...
Mar 10, 2022
2 mins
Best Practices for Redux
Intro One year ago, I started to learn Redux for the first time. I was a code newbie, and I had a lot of difficulties understanding Redux! I was annoyed that I couldn't pass props from child components to the parent components in React, and I really needed Redux for that! I searched for alternatives to use instead of Redux, like React Context APIs, and I was happy with it because it’s already part of React. I didn't want to install any additional packages, and I found it easier to understand than Redux! In my first big project with React, I used React Context APIs and the project was so big and complex! After a while, the project became increasingly complex until I lost control, and couldn’t even make small changes. Plus, the states in React Context APIs were really a mess! What is Redux Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time-traveling debugger. Why do we need a Global store? In all major frontend frameworks like Angular, React, Vue, & Svelte, you can only pass data between your components from the parent components to the child components, and it is super hard to pass the data upward to the parent components! So Redux helps us to share the data easily with our different components! Redux’s problem But the real problem with Redux is organizing your files! Most of the tutorials just show you how you can configure a store, create a reducer, use dispatch, …etc, but after you use Redux for a while, you will have a mess of unorganized files, and you will need to learn how to organize the Redux files in your project! In this article, we will learn about the most used Redux patterns in real-world applications! Also in this tutorial, we will apply all of these patterns to this simple app! It’s a counter app created with create-react-app Redux Tool Kit (Recommended) This is the recommended pattern by the Redux core team, RTK is so much simpler and easier than using Redux! It uses slices, a new way to create and write the reducers, initial state and actions. Each slice file follows this pattern: ` And finally, we connect the slices with each other in the store.js ` Here is live example, run npm run dev https://stackblitz.com/edit/vitejs-vite-yaxe7w?ctl=1&embed=1&file=src/App.jsx&hideNavigation=1 Then you’ll use this store for the Redux provider in your app, simple isn’t it? For more info about this pattern take a look at Redux Essentials, Part 2: Redux App Structure Pros: As you see, everything is super organized and easy to edit and read! Redux ducks Redux Ducks is a different design pattern created by Erik Rasmussen, and in this pattern, we are merging all of our single reducer files into the reducer file itself, let’s see: ` And every reducer (duck file) will be: ` As you can see, we start with declaring our action types, and have no need to export them: ` Then the reducer (MUST BE DEFAULT EXPORTED). ` Finally, create the action types ` And that’s it! We have a standalone reducer that is so much easier to work with! Other strategies There are some software engineers who like to put the reducer next to the files or components that they will use in them: ` The old pattern This pattern is used by old apps, it’s not recommended to use it but you may find it when you work on old projects ` It is a folder called reducer that contains three other folders. and the store.js file in the root! Let's break them down. redux/types/counter.js is where we will save the action type as shown below: ` We added two action types for the two operations that we want to create, increment, and decrement. redux/actions/counter.js here we will add all of our action functions for the counter: ` First, we imported the types from the types file. Then, we created the two functions of our counter and exported them: redux/reducers/counter.js is the reducer for our counter. ` As you see, we imported the counter types again, and created our reducer. Finally, redux/store.js is where we will combine all of our reducers, and then configure our store: ` We imported the reducers first! Then we combined reducers, and finally create the store! Pros: As you see, everything is super organized, and easy to edit and read! Cons: Every reducer needs three files to be created, and this will end up with a massive number of files. Finally As you see, there are a lot of cool ideas to keep your Redux file organized. Try them, and choose the pattern that fits your project! And always work to keep your Redux files organized because this would be a game-changer for your project. 😉...
Jan 24, 2022
4 mins
Introduction to Redux Pattern
Introduction to Redux Pattern In this overview of the Redux Pattern, we'll dig into the basics and answer these pressing questions: - *What is the Redux?* - *Why do we use the Redux?* - *When do we use the Redux?* Redux patterns in applications created in React or Angular are very handy tools in helping define state and managing active and passive events. What is the Redux Pattern? > Redux is a pattern and library for managing and updating application state, using events called "actions". - Redux Documentation Not only is redux great for defining events, it also guides the flow of events through preditable event tracking. What Redux Pattern is not Redux and Redux patterns are not to be confused with Flux patterns or Flux architecture. The main difference between these two patterns is the "single source of truth" concept. Stores are our single sources of truth containing the state of our application. In Flux, the store can be split and defined in multiple locations throught the application. Redux as a single source of truth means that we can better maintain and improve our applications by merging state and events into a single location. This single location feeding the application is one of the key considerations developing for the architecture and scalability of an application. Why do we use the Redux Pattern? > ...Redux makes it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. - Redux Documentation While Redux's use is simple for managing a "global" or "single source" level of state, there are some other impacting benefits: Predictability of Events. When we know what event will happen next if we click a button or link, we take away all assumptions about events triggering other events. Better Debugging from Event Tracing. Personally, event tracing is one of the huge benefits I like about state management because defects in events can be pinpointed accurately. If state wasn't updated correctly, we can make better logical assumptions. Complex State Change State is the one thing we can rely on and sometimes this state can receive asynchronous updates from different events. Redux makes these udpates easier to manage. When do we use the Redux Pattern? Ideally, Redux should be used for parts of an application that share state. Here are a few other considerations when deciding to use the Redux pattern. Frequency of State Changes State can be small or large, simple or complex, but in every case where events are performed, state will always be updated. Application Scalability First, we need to predict how an application will grow in size from the number of features. As an application scales from a simple set of functions to an enterprise-level experience, duplicated code and events decrease performance. Additionally, a Single Page Application (SPA) benfits greatly from Redux. For example, event-based routing behaves differently from a "regular" website since we conditionally generate new pages. As the SPA increases in features or pages, so does its need for state management. Complexity of State Changes and Logic Sometimes application state complexity increases as the application scales. Technical debt takes on a different form when the state isn't properly managed. *Red, Green, Refactor* is a simple, effective strategy to help minimize state technical debt - debt casue from a lack of code hygiene. In *Red, Green, Refactor* we identify what needs to change, determine how we make the change, then execute the change. In the case for state, we can merge similar portions of state together or split apart state by feature or function, making it easier to access parts of state. Likewise, any logic that relies on combined or nested state should be updated as you make those changes. How to Start Using Redux Today While this is an introduction to using Redux, it's helpful to note where we can start to add it in our projects. File Structure First, we defined a store location. We can choose to have this live on the same directory level as our other components and services: ` React Next, we can utilize state management. For vanilla JavaScript apps, we can use Redux as is, but there is special version of it created for React applications called React-Redux. The main difference here is the React integration: ` Angular Similarly for the popular Angular framework, we have NgRx, a version of Redux created specifically for Angular. ` You can choose your own adventure with state management. Choose wisely! Closing Thoughts Talking about the glories of Redux comes with it's cons as well. Keep in mind that using Redux also means defining a state that can become overly complex and require more overhead for Red-Green Refactoring. The benefits far outway this cost, however. The key things to remember about Redux is that it's meant to define a predictable set of events, manage and share application state in a *single source of truth*, and should be used when a project becomes large and complex....
Jan 11, 2021
4 mins