State Management

Agenda

  • What is state management
  • Props Drilling
  • Undirectional Data Flow
  • Flux
  • Redux
    • Core Concepts
    • Three Principles
    • Redux Toolkit

What is state management

As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs.
State management is simply a way to organize communication and sharing of data across components.

React useState

training app logo

React useState

              
                const Training = () => {
                  const [training, setTraining] = useState();
                  ...
                  return <TrainingProgressTable training />
                }

React useState

    App features:
  • list of exercises
  • a timer between each approach and between each exercise to take a rest
  • feature to track the number of completed approaches for each exercise
  • an integrated stopwatch
  • an ability to save the duration of each exercise somewhere

Props Drilling

              
                const App = () => {
                  const [training, setTraining] = useState([]);
                  // more code
                  // ...

                  return (
                    <div>
                      <Training>
                        <TrainingReader training={training} onStateUpdate />
                        <TrainingProgressTable training={training} onStateUpdate />
                      </Training>
                      <TrainingProgressTable training={training} onStateUpdate>
                        <ExerciseStopwatch exercise onStateUpdate />
                        <TrainingSender training={training} />
                        <TrainingTimer training={training} />
                      </TrainingProgressTable>
              
                      <TrainingSender training={training}>
                        <SomethingElse training={training}>
                      <TrainingSender />
              
                      <SomethingElse2 training={training}>
                        <Whatever training={training} />
                      <SomethingElse2 />
                    </div>
                  );
                }

TODO: Context

explaing one more time how context can help to solve Props Drilling
provide example
proc/cons

TODO: Unidirectional Data Flow

explain what it is

MVC

explain what it is

MVP

explain what it is

MVVM

explain what it is

Design History. Flux.

Flux

Flux VS MVC

Flux VS MVC

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut massa leo, sollicitudin quis urna in, porta faucibus leo. Vestibulum facilisis rutrum tellus, eget interdum magna imperdiet at. Suspendisse at porttitor ex. Proin ut est pretium, ultrices nisi in, iaculis enim. Pellentesque eu consequat dolor. Morbi et lorem eleifend, porta nunc ac, interdum libero. Nulla facilisi.

- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet
- Lorem ipsum dolor sit amet

What is it Redux?

Redux

Redux is a state container for js application.

It can be used in pair with React or any other view library.

History of Redux

Redux was created by Dan Abramov and Andrew Clark in 2015. Abramov began writing the first Redux implementation while preparing for a conference talk at React Europe on hot reloading. Abramov remarks, "I was trying to make a proof of concept of Flux where I could change the logic. And it would let me time travel. And it would let me reapply the future actions on the code change.

Redux Data Flow​

Redux_data_flow

Three Principles

  1. Single Source of Truth
  2. State is read-only
  3. Changes are made with pure functions

todo: Redux code example

todo

todo: Redux thunk

todo

todo: Redux toolkit

todo

todo: mobx

todo

todo: mobx

todo

QA