Introduction to Redux – a simple practical Redux example

https://grokonez.com/frontend/redux/introduction-to-redux-a-simple-practical-redux-example

Introduction to Redux – a simple practical Redux example

In this tutorial, we're gonna introduce main concept of Redux: what it is, how to work with Redux Store, Action, Reducers. Then we will practice to understand all of them in a simple practical Redux example.

Related Post: How to connect React with Redux – react-redux example

Overview

Redux

Redux is a state container that helps JavaScript applications to manage state.
=> Whenever we wanna read the state, look into only one single place - Redux Store.
=> Managing the state could be simplified by dealing with simple objects and pure functions.

Redux Store

Store holds the current state so that we can see it as a single source of truth for our data.
With Redux Store, we can:

• access to state via store.getState()
• update state via store.dispatch(action)
• register listeners via store.subscribe(listener)
• unregister listeners via the function returned by store.subscribe(listener):

  
  const unsubscribe = store.subscribe(listener);
  unsubscribe();
  

  *Note: We only have a single store in a Redux application. => When we wanna split data handling logic, we combine Reducers instead of using many Stores.

  Redux Reducer

  Reducer is a pure function that generates a new state based on an Action it receives. These Actions only describe what happened, but don't describe how state changes.

  
  const countReducer = (state = initialState, action) => {
  // return state;
  }
  

  *Note: Reducer must be a pure function: => From given arguments, just calculate the next state and return it. => No side effects. No API or non-pure function calls. No mutations.

  Redux Action

  Action is payload of information that is sent to Store using store.dispatch(action). Action must have a type property that should typically be defined as string constants. It indicates the type of action being performed:

https://grokonez.com/frontend/redux/introduction-to-redux-a-simple-practical-redux-example

Introduction to Redux – a simple practical Redux example