Hello, fellows!
Today we'll look at the Redux state management system.
My main goal is for you to briefly understand Redux, how it may help you manage state in your React Native app, and be inspired by the list of open-source projects that use Redux.
So let’s dive in. 🏊
Redux is a predictable state container that helps you manage the state of your React Native application.
The built-in state management in React Native is ideal for applications with few components and no plans to extend in the future. However, Redux it's commonly used in more complex apps where moving state between components might be difficult and app state is updated frequently over time.
Redux provides a central store for saving and updating the state via actions and reducers.
Here's a graphic representation of data flow:
Now, we'll go over the key concepts of store, actions and reducer:
Store
In essence, your application's global state is kept in a single store. Each component can access the stored state through getState() method returning the current state of your app.
Actions
Any state changes are triggered by actions and the only way to get data into the Redux store is through dispatch(action) method.
Reducer
Because a reducer is not allowed to change the current state, the reduction function takes an accumulation with a value and returns another accumulation. Simply said, this function reduces a bunch of values to a single value.
Maybe you are already familiar with Array.prototype.reduce() in JavaScript. They are related!
Reducers compute a new state based on the previous state and an action. Actions define what and where changes are made. Reducers indicate how it is changed.
How does Redux differ from AsyncStorage?
AsyncStorage is a storage system that allows you to persist state whenever we open and close our app. In contrast, as previously said, Redux is a state management system designed to solve the problem of moving state around components.
If you are interested in learning more about AsyncStorage, check out my article on How to Use AsyncStorage in React Native.
Open Source React Native Projects that use Redux
Catalin Pit made it clear :
Reading someone else’s code helps a lot!
So here’s a list of Open Source React Native projects using Redux:
- Airbnb Clone
- Fast buy
- Simple Counter
- Recipes App by instamobile
- My Recipe App
And some React Native boilerplates:
BREAK TIME ⛱️ . Perhaps you'd like to play Solitaire, which was created with React and Redux.
Conclusion
Redux is a great tool. It has a single source of truth, a global store, from which its state may be modified through actions and reducers. Reducers are pure functions that calculate a new state from a prior state and an action.
Questions that describe actions: Where and what should I send to the reducer? And describe reducers: How should I modify state based on the previous state and action received?
When should you use Redux?
- When you need to move state between components
- When your app is complex and requires a large amount of application state in several locations across the app
- When app state is frequently changed
- When you need to see how the state changes over time.
Check out these resources to learn more:
- Official Redux learning resources
- How to use React Native with Redux
- Comprehensive guide to using Redux in React Native
Hope you found this article useful and inspiring. Until next time, cheers! 😊