https://hashnode.com/preview/62fa6ea9fffdab933bded147

Redux is a state management library hye el place where we save the data li ana be3reda fi el application taba3e wel state bjame3a in one place mnsami el store aw el ma5zan. men 5ilel hal store be2dar wasel el data la aya mahal bel app bidun ma esta5edem props. Redux hye maktabe menfesle fua tes5dema ma3 react aw ma3 angular aw ma3 vue js aw ma3 javascript.

========================================== Redux:store

javascript object bi haki el reducer w bi 2elo kif ygayer bel data bi albo property esma type js object that tell reducer how to change data Type ....
1-action : byeje men el UI w bikun m7amal shaglten..no3 and data type and payload

2-REDUCER : byesta2bel el action bel type wel data li fi w byebda bya3mlo reducer:function btarje3 data js Function that return some data (state)

3-javascript object bi albo kelshi store is js object that hold state and reducer 3-store : bi albo data li hye state wel reducer (reducer + state). const store = Redux.createStore()

4-dispatch store.dispacth()

=========== //Reducer const reducer = () => []

//Store const Store = Redux.createStore(reducer);

//Get State console.log(store.getState());// []

//Action const action = { type:'split', data: 'omar saade' // or payload }

================================ -Reducer javascript function btarje3 data -action hye object bi kalem el reducer el zay yarge3 hal data

iza badak twasel el reducer ma3 el action fik ta3mla 3an tari2 dispatch

dispatch lal action : yaane eb3at el action lal reducer w men baada

state hye 3ibara 3an data taba3 el app li rej3a men reducer w msayave

useSelector : a custom hook made by react redux team.

useSelector hook. and there is also useStore but useSelector is more convenient cz that allows us to then automatically select a part of our state managed by the store.

class-based component : connect which u can use instead.. w hye tosta5dam ka wrapper lal component to connect the component to the store.

when we use useSelector..React Redux will automatically set up a subscription to the redux store for this component..yaane el component lah ya3mul update automatically when the data changes in the Redux store.

2-Dispatching Actions From Inside Components:

useDispacth()

//                       Create a Redux Store
import { configureStore } from '@reduxjs/toolkit';

//                     Create a Redux State Slice

import { createSlice } from '@reduxjs/toolkit';

const initialCounterState = {
  counter: 0,
  showCounter: true
};


// Now we wanna register this with our store.
const counterSlice = createSlice({
  name: 'counter',
  initialState: initialCounterState,
  reducers: {
    increment(state) {
      //redux toolkit internally uses another package called immer
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    increase(state, action) {
      state.counter = state.counter + action.payload;
    },
    toggleCounter(state) {
      state.showCounter = !state.showCounter;
    }
  }
});

//______________________________________________________________


const initialAuthState = {
  isAuthenticated: false
};



// Now we wanna register this with our store.
const authSlice = createSlice({
  name: 'authentication',
  initialState: initialAuthState,
  reducers: {
    login(state) {
      state.isAuthenticated = true;
    },
    logout(state) {
      state.isAuthenticated = false;
    },
  }
});




//              Create a Redux Store
// reducer: counterSlice.reducer he el jemle bt5alina net7akam bel 4 reducers

//multiple reducer
const store = configureStore({
  reducer: {
    //key names : reducers
    // And these individual reducers here will then automatically be merged together
    // into one main reducer, which is exposed to this store.
    counter: counterSlice.reducer,
    auth: authSlice.reducer
  }
});


// single reducer
//export const store = configureStore({ reducer: counterSlice.reducer });

export const counterActions = counterSlice.actions;
export const authActions = authSlice.actions;

export default store
//___________________________________________________________________________________
//                        WITHOUT REACT TOOLKIT

// import { legacy_createStore as createStore } from 'redux'



// const enhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__


// const initialState = { counter: 0, showCounter: true };


// const counterReducer = (state = initialState, action) => {

//     if (action.type === "increment") {
//         /*you should never super important never mutate the state, the existing state.
//         You should never change the existing state. Instead, always override it
//         by returning a brand new state object.*/
//         return {
//             counter: state.counter + 1,
//             showCounter: state.showCounter
//         };
//     }



//     if (action.type === "increaseby5") {
//         return {
//             counter: state.counter + action.amount,
//             showCounter: state.showCounter
//         }
//     }


//     if (action.type === "decrement") {
//         return {
//             counter: state.counter - 1,
//             showCounter: state.showCounter
//         }
//     }


//     if (action.type === "toggle") {
//         return {
//             counter: state.counter,
//             showCounter: !state.showCounter
//         }
//     }



//     return state;
// }




// const store = createStore(counterReducer, enhancer());

// //connect my react app to that store
// //provide this store to the react app
// export default store;








//____________________________________________________________________________________________
                        //  ANOTHER WAY TO WRITING THE REDUCER FUNCTION

/* function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "increment":
      return {
        ...state,
        counter: state.counter + 1
      }
    case "decrement":
      return {
        ...state,
        counter: state.counter - 1
      }
    case "increase":
      return {
        ...state,
        counter: state.counter + action.amount
      }
    case "reset":
      return {
        ...state,
        counter: 0
      }
    case "toggleCounter":
      return {
        ...state,
        showCounter: !state.showCounter
      }
    default: return state
  }
}
*/