# Redux Workshop 🌟🌟🌟

- What is redux all about? 🤔
- How redux internaly works? implementation
- Functional programming: pure functions and Higher-order functions⚡⚡⚡⚡

<br>

- Redux Thunks and redux dev-tools extention 🔥
- Implement redux dev-tools and thunks on React toDo App.
- Redux toolkit **configureStore** **createAction** **createReducer** **createSlice**
- Intro to duck 🦆🦆🦆
- Re-implement on todo app

What is Redux
---
- **State Container:** One place for everything. 🏬
- **It's tiny!** 2.6kB, **firebase is 221.9KB**. [bundlephobia] (https://bundlephobia.com/result?p=redux@4.0.5).
- **Data flow control:** More complex applications are harder to control, manage and share data between it's routes and components
- **Predictable:** Redux has made sure that data mutations are restricted and have certain way to perfom.
- _Single Source of Truth._
- _State is read-only, we emit actions to mutate it._
- _Changes are made with pure functions, a function that recieves previous state, an action and return a new state._
---

redux code

import reducer from './reducer';

function createStore(reducer) {
  let state;
  let listeners = [];

  function subscribe(listener) {
    listeners.push(listener);
  }

  function dispatch(action) {
    state = reducer(state, action);

    for (let i = 0; i < listeners.length; i++) listeners[i]();
  }

  function getState() {
    return {...state};
  }

  return {
    subscribe,
    dispatch,
    getState,
  };
}

export default createStore(reducer);

Functional Programming 🔥🔥🔥
---
"Functional programming (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative, and application state flows through pure functions. Contrast with object oriented programming, where application state is usually shared and colocated with methods in objects." [Eric Elliott article on medium](https://medium.com/javascript-scene/master-the-javascript-interview-what-is-functional-programming-7f218c68b3a0)

[Imparative vs declartive programming](https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2)

<br/>

**What is a pure function?**
- A pure function always returns the same result for the same arguments.
- Dosen't use global variable, no side effects, api calls, dom manipulations.
- Easier to test.
---

Pure function (no side-effects)

function updateCount(count){
    return count + 1;
    
}
updateCount(1) 2 
updateCount(1) 2
updateCount(1) 2

Impure function (using global variable,dom and logs)

let count = 0;
function updateCount(acc){
    console.log('hi');
    someDomElement.textContent = "hello there";
    return count+=acc;
}
updateCount(1) 1 
updateCount(1) 2
updateCount(1) 3

---
But how is that related to Redux?
- We write reducer functions, which is a functions takes the state, clone it and return a new copy of it (if we pass the same state any time, will get back the same result of the new state, we don't mutate state directly)

const authReducer = (state,action) => {
    switch(action.type){
    case 'foo': return { ...state,name:action.payload.name };
    break;
    ...etc
    }
};

---
**I need to see Code** 🤪🤪🤪

Clone this repo and **follow the steps**:

  $ git clone https://github.com/mossa-Sammer/redux-workshop
  $ git checkout redux
  $ npm install 
  $ npm start

we have todo app with integrated with firebase🔥
we need to use the signup thunk (it's ready), add a thunk for login and use it.🚀🚀🚀

---
RTK, Redux-Toolkit
---
Why use RTK?

" Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core, and contains packages and functions that we think are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.", [Redux offical docs](https://redux.js.org/introduction/getting-started#redux-toolkit)

**but what it offers?** 🤔 🤔
- do more work with less code.
- let you write "mutative" immutable update logic.
- Opinionated.
- very simple and easy to setup.
- [dev tools](https://github.com/zalmoxisus/redux-devtools-extension), [thunk middleware](https://github.com/reduxjs/redux-thunk), [♾️ immer.js](https://immerjs.github.io/immer/docs/introduction) out of the box.
- create an entire slice with single function.
- **configureStore**, **createAction**, **createReducer**, **createSlice**.

---
♾️ immer.js example from docs

import produce from "immer"

const baseState = [
    {
        todo: "Learn typescript",
        done: true
    },
    {
        todo: "Try immer",
        done: false
    }
]

const nextState = produce(baseState, draftState => {
    draftState.push({todo: "Tweet about it"})
    draftState[1].done = true
});

console.log(baseState, nextState, baseState === nextState);

---

need to see code again 🤪🤪🤪

let's configureStore, createSlices, selectors and dispatch actions

we are going to use the **Duck Pattern** to build the slices

---
DUCK Pattren:🦆🦆🦆
---
[Article on medium](https://medium.com/@matthew.holman/what-is-redux-ducks-46bcb1ad04b7)
[Offical git repo](https://github.com/erikras/ducks-modular-redux)

RTK docs
> you should put all your action creators and reducers in one file, do named exports of the action creators, and a default export of the reducer function.

- _MUST export default a function called reducer_
- _MUST export its action creators as functions_
- _MUST have action types in the form npm-module-or-app/reducer/ACTION_TYPE, what?_ 🤔

  LOGIN_REQUEST_SUCCESS => app/auth/loginRequestSuccess

- _MAY export its action types as UPPER_SNAKE_CASE, if an external reducer needs to listen for them, or if it is a published reusable library_

<img src="https://github.com/erikras/ducks-modular-redux/raw/master/migrate.jpg" />
<br />
<br />

**follow the steps**

  $ git checkout rdux-solution
  $ npm install @reduxjs/toolkit 
  $ npm start

---
WRAP UP:
---
- Touched on functional programming basics.
- Siplited data fetching and error handling logic from components to thunks.
- Used redux dev-tools.
- Immutibality libraries.
- A taste of firestore converter.
- Redux toolkit power.