Redux

2018-01-02

2022-10-16

Jacques Leemans

R, Redux

7 min. read

Redux

Introduction
Redux Dan Abramov is almost the same as Flux

Flux:

Flux complex:

Redux

Reducers manages states in the store

Educate
Redux Pattern Principles
Redux is based upon 3 major principles
Single source of truth
In Redux, there is only one store object. That store is responsible to hold all the application state in one object tree.
Having only one store object helps to simplify the debugging and profiling of the application because all the data is stored in one place. Also, difficult functionality such as redo/undo becomes simpler because the state is located in one place only.

In Redux, a reducer will receive the previous state and an action, and will produce a new state without changing the previous state. For example, in the next code block you can see a groceryItemsReducer which is responsible to react to add grocery item action:
function groceryItemsReducer(state, action) {
switch (action.type) {
case ‘ADD_GROCERY_ITEM’:
return object.assign({}, state, {
groceryItems: [
action.item,
…state.groceryItems
]
};
default:
return state;
}
}

Redux Data Flow

http://www.dotnetcurry.com/images/reactjs/redux/redux.png

In the Redux data flow, a user interaction or an asynchronous callback will produce an action object. The action object will be created by a relevant action creator and be dispatched to the store. When the store receives an action, it will use a reducer to produce a new state. Then, the new state will be delivered to views and they will update accordingly. This data flow is much simpler then Flux and helps to produce a predictable state to the application.

Redux Saga

Rematch

Redux Forms
https://redux-form.com/7.3.0/docs/gettingstarted.md/

NGXS
https://github.com/bcarson/ngxs

App Module
Product Module
User module
Shared Module

The Redux Pattern
Redux is a predictable state container for front-end apps

Single source of truth called the store
State is read only and only changed by dispatching actions
Changes are made using pure functions called reducers

Store
State - JSON object
Only shared state
Form states
Non-serializable state

Actions

Reducers

Function reducer(state,action)

NgRx Effects is backend calls

Advantages
Centralized immutable state
Performance
Testability
Tooling
Component communication

“Redux is not great for making simple things quickly. It’s great for making really hard things simple”

Examples
public class AwesomeGameStore : Store
{
static private ListSubscribers = new List();
static private Reducer Reducer;
static private State State;
static public void Subscribe(INotifyee notifyee)
{
Subscribers.Add(notifyee);
}
static public void Dispatch(Action action)
{
State = Reducer.ProcessAction(State, action);
Notify();
}
static public State GetState()
{
return State;
}
};

Tic Tac Toe
Player makes a move — puts a X somewhere on the board
The system needs to check if the move is legal — whether the slot is free. That is done by running a set of rules on the board model.
If it is NOT free — the ADD_ITEM_FAILURE action should be dispatched, thus keeping the currentPlayer property without change.
If it is free — the ADD_ITEM_SUCCESS action should be dispatched
The boardReducer should update the board.
The gameRuntimeReducer should update the current player
If the second player is AI — the AI manager should fire up the CALCULATE_NEXT_MOVE action
After the next move is calculated, the TRY_ADD_ITEM should be fired, resulting in a succesfull board update and switching control to the other player.

State
{
board:{}, //Current state of the board
players:[], //Player objects, each player has a name and colour
currentPlayer:{}, //Who is the current player to make a move?
time:DateTime, //How much time passed since game start?
steps:int //How many steps were taken until now?
}

Actions
actions/moves //TRY_ADD_ITEM, ADD_ITEM_SUCCESS, ADD_ITEM_FAILURE - player makes a move - add item to board
actions/rules //RUN_RULES - to run rules on board to determine if someone won.
actions/board //CLEAR_BOARD
actions/game // GAME_START, GAME_END,…
actions/AI //CALCULATE_NEXT_MOVE

Reducers
boardReducer //updates the board model
gameRuntimeReducer //Updates game runtime - currentPlayer, time, steps, etc.

https://github.com/mattak/Unidux

Execute
Start with Wireframes

Identify the actions
ADD_XXX
REMOVE_XXX
SET_XXX
CLEAR_XXX
FETCH_XXX
CANCEL_FETCHING_XXX
CHANGE_XXX

Save actions in an enum or constants

Create initialState.json file
{

}

References
http://www.dotnetcurry.com/reactjs/1356/redux-pattern-tutorial

https://egghead.io/courses/getting-started-with-redux

https://github.com/austinmao/reduxity

https://github.com/mattak/Unidux

https://www.lynda.com/React-js-tutorials/Plan-Redux-app/540345/569713-4.html?autoplay=true