Introduction

Hi folks!

This is the first part of my ultimate guide to Redux, in this series of articles I'll try to guide you through the process of mastering Redux from a efficient perspective, avoiding the same mistakes I did when I started learning it and dive into some commum misunderstandings and tricks about the Redux programming flow.

I hope that Redux can make you rethink the way you write software in general as I did since I first met Redux some years ago.

Some Perspective 😵

From my perpective, everyday I see a bunch of people struggling to learn Redux, I noticed that the real problem isn't the library itself, but the mind shift about how the data should flow in order to handle the app state and above all that, the huge amount of concepts and third party libraries introduced at once, like React-Redux, Redux-Thunk, Redux-Saga, Middlewares, Server side rendering, testing and more. Instead all this stuff should be learned naturally after a right understang about how pure Redux works, why you need it and if you really need it in your project at all.

That looks like long path, but keep calm!

Another question I commonly hear among people just starting to learn about the Redux way of thinking is

How do I know if I manage my component state using the redux store or just react?

If you don't know what a store is, I'll explain in details latter on, but initially think about it as an object that is responsible for defining the current state of your application, and it's communly described as the single source of truth, e.g. a store that handles the state of a user login session could be described as something like:

const loginState = {
    isLogged: true,   
    user: {
        username: 'Chewbacca',
        password: '123456'    
    }
}

Later on, we will see the best practices in defining store objects and spot some improvements in the example above 😉 .

What we will learn 🚀

As a practical example we will build together a basic application that handles the user login, sign up and session state using Redux, since that is a very commom use case and we can have fun building and refactoring it from scratch. Remember that the learning process really happens with practice.

Concept art by Arslan Ali.

Prerequisite ‍🎓

The only prerequisite is that you know React. If you don't know yet, I suggest the facebook's guide that can be found here. Or may be if we have anough people interested we can start a series about learning react in a funny way too. Leave in the comments.

Summary 📓

Part 1 - Getting started with Redux.

What is Redux?
Why use Redux?
When use Redux?
WTF is a store?
WTF is a reducer?
WTF is an action?
Practical Examples.

Part 2 - Getting stylish | Designing your Login and Sign up App.

Setting up the app structure.
Designing our app components.
Styling our app.

Part 3 - Architect it up | Building Redux in your App.

Creating our Redux Store.
Creating the Reducers.
Creating the Actions of our app.

Part 4 - Continue the design of your Redux App.

Binding everything together.
Logging and debugging our app.

Part 5 - Getting Advanced | Connecting your App with the Backend.

Getting started with async actions.
Connecting to the backend.

Part 6 - Refactoring your App.

Using React-Redux.
Best Practices with the store object.

Part 7 - Reflections and Future.

Last but not least!

In order to continue this series we need your help commenting, suggesting improvements and voting up. Let's start contributing for more great contents about the tools we love in a decentralized way!

P.S.

Pardon my english and great studies.