리덕스 툴킷

🤷‍♀️ 리덕스란?

Javascript 상태관리 라이브러리이다
컴포넌트들이 props없이 state 공유가능하게 해준다!!

상태 관리가 필요한 이유는 프로젝트 규모가 커지면서 상태 데이터의 전달과 업데이트가 복잡해지고, 코드의 가독성과 유지보수가 어려워지기 때문이다. Props를 통해 상태를 전달하게 되면 코드가 복잡해지고, 상태 변경 시 불필요한 컴포넌트 리렌더링이 발생할 수 있다.

=> Redux는 이러한 문제를 해결하기 위한 상태 관리 라이브러리이다

👾 Redux는 store.js 한곳에 state들을 저장해두어 모든 컴포넌트들이 직접 가져다 쓸수있다!!

(즉, 상태관리를 컴포넌트의 바깥에서 하는 것임)

🤷‍♀️ 리덕스 툴킷(Redux-Toolkit) 이란?

효율적인 Redux 개발을 위한 저희의 견해를 반영한, 이것만으로도 작동하는 도구 모음, Redux Toolkit은 Redux 로직을 작성하기 위한 표준 방식이 되도록 만들어졌고, 사용하기를 강력히 추천한다고 함

🤷‍♀️ Redux 사용하기

리덕스 라이브러리 설치

터미널에 입력

npm install redux
npm install react-redux (리액트와 사용시)
npm install @reduxjs/toolkit react-redux (리덕스 툴킷 사용시)

 

state slice

📢 Action

action은 redux에서 함수를 부를 때 쓰는 두번째 parameter 혹은 argument임
즉, store 상태에 변화를 일으키는 것을 액션이라고 한다

const reducer =(count=0, action)=>{
  return count;
}

• action은 반드시 object 여야 함! string이 될 수 없다!
• action은 무조건 type이 있어야 함! {type : "ADD"}
• modifier와 communicate하는 방법이다~

📢 Reducer

state(현재상태)와 action(type)를 받아 새로운 상태객체를 반환한다

 

const reducer = (state, action) => { 
}

 

reducer는 function(함수)야!

너의 data를 modify(수정)하는!

const reducer = (count = 0, action) => {
  if (action.type ==="ADD"){
    return count + 1;
  } else if (action.type ==="MINUS"){
    return count - 1;
  } else {
    return count;
  }
};

=> 여기에선 state를 (count=0)으로 받아주었다

 

📢 Store

Store는 컴포넌트 외부에 있는 상태 저장소임
Store안에는 state(현재 상태)들, reducer, 그리고 몇 가지의 내장 함수를 포함하고 있음 (dispatch, Subscribe 등등...)

 

Redux 라이브러리를 설치했으면,
먼저 store.js 파일을 생성한다

import {createStore} from 'redux';

const reducer = (count = 0, action) => {
  console.log(count, action)
};
const store = createStore(reducer);

createStore로 저장소를 생성한다
그런 다음 reducer를 담아 store에 저장한다

 

📢 Dispatch

Store의 내장함수
dispatch를 이용해서 우리는 action을 객체 형태로 보내준다
(=액션을 발생시키는 역할)

store.dispatch(action)
ex) store.dispatch({type:"ADD"})

스토어의 상태 변화가 필요하다면?

=> dispatch가 액션(객체 형태, ex) {type:ADD})이라는 메시지를 전달해서 스토어에 알려 줌!

 

👾 우리는 dispatch를 통해서 나 바꿀거야!라고 reducer에 요청 가능!
type 뒤에 오는 것이 요청 메시지!!라고 생각하면 된다!

 

📢 Subscribe

Store의 내장함수
특정 함수 형태의 값을 파라미터로 받아옴
스토어의 상태가 업데이트될 때마다 특정 함수가 호출된다

 

우리가 언론사(store)을 구독하면 뉴스(state)가 업데이트 될 때마다
알람(특정함수 ex) onChange)이 호출된다! 라고 생각하면 됨

store.subscribe(특정함수);
ex)store.subscribe(onChange);

 

❓ 만약에 네가 change를 너의 store에서 감지하고 싶다면,

⇒ 그 change를 subscibe(구독)하면 됨!!

const onChange()=>{
number.innerText = store.getState();
console.log('changed')
}
store.subscibe(onChange);

=> 상태변화를 감지할 때마다 store.getState();에 의해 현재의 상태와 함께 console.log('changed')가 나타나는 모습

 

추가로...

if else문 대신 case문 사용하기

 

if else문 사용

const reducer = (count = 0, action) => {
  if (action.type ==="ADD"){
    return count + 1;
  } else if (action.type ==="MINUS"){
    return count - 1;
  } else {
    return count;
  }
};

case문 사용

const reducer = (count = 0, action) => {
  switch (action.type) {
    case "ADD":
      return count + 1;
    case "MINUS":
      return count - 1;
    default:
      return count;
  }
};

 

if else문보다 case문을 사용했을때 코드의 가독성이 더 높음

(어느 것을 쓰든 상관은 없음 개인 취향에 따라 사용하기~)

 

변수에 담아 사용해서 action 객체보내주기

 

변수 사용

const ADD ="ADD";
const MINUS ="MINUS";

const handleAdd = () => {
  store.dispatch({ type: ADDD })
}

 

 

변수에 담아주어 javaScipt가 뭔가 잘못되었다고 말을 해줌, string을 쓰게 되면 type: "ADDD" 오류가 뜨지않음
=> 오류를 빨리 확인할 수 있다

 

🤷‍♀️ 정리하기

Action 애플리케이션에서 일어나는 사건을 나타내는 객체
Reducer 액션에 따라 상태를 변경하는 함수로, 현재 상태와 액션을 받아 새로운 상태를 반환함
Store 애플리케이션의 상태를 저장하는 중앙 저장소로, 상태 변경과 관련된 작업을 수행함
Dispatch 액션(객체 형태)을 스토어에 보내 상태를 변경시켜줘라고 알림
Subscribe 스토어의 상태가 변경될 때마다 특정 함수를 실행하여 상태 변화를 감지

 

🤷‍♀️ 한눈에 정리하기

 

리덕스 사용 흐름 정리

 

3가지 인자

initialState 초기값 설정

name설정

reducers설정

 

1. slice 생성하기

index.js

import { createSlice } from '@reduxjs/toolkit'

const projectstate = createSlice({
    name: 'project',

    initialState: {
        title: '세미나',
        desc: '안뇽',
        cnt: 0
    },

    reducers: {
        changeTitle: (state, action) => {
            state.title = action.payload
        },
        changeDesc: (state, action) => {
            state.desc = action.payload
        }
    }

})

export const { changeTitle, changeDesc } = projectstate.actions;

export default projectstate.reducer;

 

2. reducer 등록하기

store.js

import { configureStore } from '@reduxjs/toolkit';
import projectReducer from './index'

export const store = configureStore({
    reducer: {
        project: projectReducer
    }
})

export default store

 

3. Provider를  써준뒤 store(저장소) 공유하기

App.js

import store from './store/store'

root.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>

);

 

4. useSelector를 통해 공유저장소를 맘대로 가져다 쓸수있다~

let state = useSelector((state)=>{return state})

 

header.jsx

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


const HeaderNav = (props) => {
    const dispatch = useDispatch();
    const { project = useSelector(state => state.project);