State Management in React applications

RS School 2020 Q3

Presentation:
«State management in
React - applications»

Samorukov M.L.

What is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called 'components'.

What is State?

State is a special built-in object, which allows components to create and manage their own data. Components cannot pass data with state, but they can create and manage it internally.

State management in pure React

State should not be modified directly, but it can be modified with a special method called `setState()`.

What happens when state changes?

2 Important points in state management in pure React

- State shouldn’t be modified directly – the `setState()` should be used;
- State affects the performance of the app, and therefore it shouldn’t be used unnecessarily.

What type of components should use state?

Conclusion:

- Components can create and manage their own data with state;
- state is for managing data;
- State data can be modified by its own component, but is private (cannot be accessed from outside);
- Modifying state should happen with the `setState()` method;

Flux

State management in FLUX.

Flux is an architectural pattern proposed by Facebook for building SPAs. It suggests to split the application into the following parts:

- Stores;
- Dispatcher;
- Views;
- Action / Action Creators.

Flux

View update in Flux - unidirectional data flow

Views do not modify the data they received. They listen for changes of this data, create actions with new values, but do not update the data.

Stores, views and any other action can’t change the state in (other) stores directly.

They must send an action through the dispatcher.

Types of dataflow in flux

Store Writes in synchronous actions.

Store Writes in asynchronous actions.

Flux. Conclusion.

Pros

Flux architecture is better in an application where views don’t map directly to domain stores. To put in a different way, when views can create actions that will update many stores and stores can trigger changes that will update many views. Actions can be persisted and then replayed.

Cons

Flux can add unnecessary complexity to an application where each view maps to one store. In this kind of application a separation between view and store is enough.

Redux

What is Redux?

Redux

Three rules of Redux

Redux

Conclusion

1. Redux is a library which has a store that contains a state tree and a few methods to interact with the state.

2. The only way to update a state inside a store is to dispatch an action and define a reducer function to perform tasks based on the given actions.

3. Once dispatched, the action goes inside the reducer functions which performs the tasks and return the updated state to the store.