Redux formation

Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. Similar to (and inspired by) Facebook's Flux architecture, it was created by Dan Abramov and Andrew Clark.

#### And so what ? - **Centralized**: Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more. - **Debuggable**: The Redux DevTools make it easy to trace when, where, why, and how your application's state changed. - **Flexible**: Redux works with any UI layer, and has a large ecosystem of addons to fit your needs.

[Redux doc](https://redux.js.org/introduction/getting-started)

#### Redux schema 

Don't worry, we will do that step by step 😃

#### ACTION Just a plain object ! <pre> <code> { type: 'ADD_TODO', text: 'Go to swimming pool' } </code> </pre> The type is the key ! It's will be the way to be understand by a reducer !

#### REDUCER Whaaaa it's a switch 🙌 . ! The args: - state : When you register a reducer, you will give a part of the state, this is the first arg. There is a default value ! - action: ALL THE ACTIONS you will dispatch, it's your famous plain object ! <pre> <code> function todos(state = [], action) { switch (action.type) { case 'ADD_TODO': return state.concat([{ text: action.text, completed: false }]) default: return state } } </code> </pre> The default case is necessary. And the state is an immutable object, please be nice with him !

#### Connect to store <pre> <code> const reducer = combineReducers({ toDo: toDoListReducer, visibility: visibilityFilterReducer }) const store = createStore(reducer) </code> </pre> Like I said before, all the reducer take care about a part of the state.

That's it for Redux ! No more 👌. The question is ... and with React ????

React + Redux = 💜

How to get back my state in my composant ?

#### The provider <pre><code> import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { Provider as ReduxProvider } from 'react-redux'; import buildStore from './todoExemple'; ReactDOM.render( <ReduxProvider store={buildStore()}> <App /> </ReduxProvider>, document.getElementById('root') ); </code></pre>

#### The connect is the key ! Like with because of the react life cycle, when the redux node change, the composant have the new value of the state ! The args: - mapStateToProps : A function to get back the state, this is a selector for me ! - mapDispatchToProps: The Actions you need to dispatch <pre> <code> const TodoConnected = connect( mapStateToProps, mapDispatchToProps )(TodoList) </code> </pre> See the exemple, it's will be more easy to understand !

Okay, it's nice, but I want to speak with the server, i'm a big boy now 👨🏽‍💻

Redux React and the Asynchronous call !

#### A magic middleware The doc: [Redux Thunk](https://github.com/reduxjs/redux-thunk) <pre> <code> import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; const store = createStore( myReducer, applyMiddleware(thunk) ); </code> </pre> A middleware is before all action, this one is for aync action.

#### The middleware The doc: [Middleware](https://redux.js.org/advanced/middleware) <pre> <code> function logger(store) { return function wrapDispatchToAddLogging(next) { return function dispatchAndLog(action) { console.log('dispatching', action) let result = next(action) console.log('next state', store.getState()) return result } } } </code> </pre>

Nice, i'm ready to understand everything now !!!

Redux in Dreamquark 🔎 !

### Type of async action - REQUEST - RECEIVE - ERROR <pre> <code> export function Exemple(params) { return function (dispatch) { dispatch(REQUEST) return fetchToTheApi().then( data => dispatch(RECEIVE), error => dispatch(ERROR)); }; } </code> </pre>

#### The meta in the state <pre> <code> function _singleBrainFetchMetaDataReducer(config, state = {}, action = {}) { if (!action.__brain__) return state; const asyncStatus = action.asyncType === 'load' ? `loaded` : `saved`; if((config.mutate || action.mutate) && !isEmpty(state)) { if(action.type.includes(`RECEIVE_${config.name}`)) { return { mutated: true, mutating: false }; } if(action.type.includes(`REQUEST_${config.name}`)) { return { mutating: true, mutated: false }; } if(action.type.includes(`ERROR_${config.name}`)) { return {...state, mutated: true, mutating: false, error: true}; } } if(action.type.includes(`RECEIVE_${config.name}`)) { return { [asyncStatus]: true, loading: false }; } if(action.type.includes(`ERROR_${config.name}`)) { return { [asyncStatus]: false, loading: false, error: true }; } if(action.type.includes(`CLEAR_${config.name}`)) { return {}; } if(action.type.includes(`REQUEST_${config.name}`)) { return { loading: true, [asyncStatus]: false }; } console.warn('[_singleBrainFetchMetaReducerBuilder] no case was found for your action, applying a default behavior'); return state; }; </code> </pre>

#### The state with the Id All our state is with id, to protect and add more than one same concept in the state <pre> <code> export function brainFetchReducerBuilder(config) { _checkConfig(config); const singleBrainFetchReducer = singleBrainFetchReducerBuilder(config); return function brainFetchReducer(state = {}, action = {}) { if (action.__brain__ && action.type.includes(config.name)) { const KEY = action.key return Object.assign({}, state, { [KEY]: singleBrainFetchReducer(state[KEY], action) }); } return state; }; } </code> </pre>

#### The builder ! <pre> <code> const APIFieldsApiDetail = ` _id name owner { _id name } dataset { _id name fieldsList } ` const loadAPIConfig = { path: 'data.api.detail', name: 'API_DETAIL', id: 'Api-detail-page', graphQlfields: APIFieldsApiDetail, api: 'api.loadApiById' }; export const loadAPIAction = brainFetchActionCreatorBuilder(loadAPIConfig, 'load'); export const loadAPIReducer = brainFetchReducerBuilder(loadAPIConfig); export const loadAPISelector = brainFetchSelectorBuilder(loadAPIConfig); export const loadAPIClear = brainClearActionCreatorBuilder(loadAPIConfig); const saveApiCallConfig = { path: 'data.api.detail', name: 'API_DETAIL', mutate: true, api: 'api.makeScoreByApiId' }; export const saveAPICallAction = brainFetchActionCreatorBuilder(saveApiCallConfig, 'save'); </code> </pre>

- The SAVE SHOULD BE IN THE SAME NODE. - With the mutate is easy - IT'S NOT A GOOD WAY TO RELOAD !!! - The graphQlfields is new here 🤩

#### The brainFetchMiddleware See the code to explain [link](https://gitlab.com/dreamquark/brain/brain-app/blob/develop/src/utils/reduxUtils.js) - Just to know how it's work, it's not really hard !

#### Good practice **To respect the patern** : - Reload always is not GOOOOOD ! - One concept, One node ! **To have pure component** : - Compose of selector ( mapDispatchToProps ) - Formator / selector / normalize ** To Avoid multiple reload **: - The selector SHOULD BE very specific ! - With a list / single object => next work !

Thank you for your attention !