redux2 TLK

import { createStore } from 'redux';

const counterReducer = (state = { counter: 0, showCounter: true }, action) => { 
  if (action.type === 'increment') {
    return {
      ...state,
      counter: state.counter + 1,
    };
  }

  if (action.type === 'increase') {
    return {
      ...state,
      counter: state.counter + action.amount,
    };
  }

  if (action.type === 'decrement') {
    return {
      ...state,
      counter: state.counter - 1,
    };
  }

  if (action.type === 'toggle') {
    return {
      ...state,
      showCounter: !state.showCounter,
    };
  }

  return state;
};

const store = createStore(counterReducer);

export default store;

//useSelector
import { useDispatch, useSelector } from 'react-redux';

const counter = useSelector((state) => state.counter);
const showCounter = useSelector((state) => state.showCounter);

//useDispatch
const dispatch = useDispatch();

const incrementHandler = () => {
  dispatch({ type: 'increment' });
};

const decrementHandler = () => {
  dispatch({ type: 'decrement' });
};

const increase10Handler = () => {
  dispatch({ type: 'increase', amount: 10 });
};

const toggleCounterHandler = () => {
  dispatch({ type: 'toggle' });
};




/**
 * redux toolkit
 */
import { createSlice, configureStore } from '@reduxjs/toolkit';

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

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      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
}

const authSlice=createSlice({
  name:"authentication",
  initialState:initialAuthState,
  reducers:{
    login(state){
      state.isAuthenticated=true
    },
    logout(state){
      state.isAuthenticated=false
    }
  }
})




//여러개의 리듀서를 하나의 스토어에서 관리할 수 있게 해준다.
const store = configureStore({
  reducer: {
    counter:counterSlice.reducer,
    auth:authSlice.reducer
  },
});

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

export default store



// 
import {counterActions}from "../store"

const dispatch=useDispatch()
const counter=useSelector((state)=>state.couter.counter)
const show=useSelector((state)=>state.couter.showCounter)

const incrementHandler=()=>{
  dispatch(counterActions.increment())
}

const increaseHandler=()=>{
  dispatch(counterActions.increase(10))
}

const decrementHandler=()=>{
  dispatch(counterActions.decrement())
}

const toggleCounterHandler=()=>{
  dispatch(counterActions.toggleCounter())
}

 
//
import {authActions} from "../store"
import { useDispatch } from 'react-redux';

const isAuth = useSelector(state=>state.auth.isAuthenticated);

const dispatch=useDispatch()

const loginHandler=(event)=>{
  event.preventDefault()

  dispatch(authActions.login())
}
 

const logoutHandler=()=>{
  dispatch(authActions.logout())
}

//불변성 => 변하지 않는 상태를 유지하는 것


//immer 불변성 유지