react-redux (with. Hooks)

 

개인적으로는 러닝커브가 매우 높은거 같아서 정리해본다!

 

 

리덕스란?

 

• 상태관리 라이브러리

 

• 복잡한 리액트 구조에서 state를 쉽게 공유하기 위한 방식

 

 

 

액션?

 

• state에 변화 필요시 액션 발생 

 

• 동작에 대해 선언된 객체

 

• type을 반드시 가지고 있어야한다

 

export const addSomething=()=>{
    return{
        type:ADD_SOMETHING   // 필수
  }}
  
export const minusSomething=()=>{
    return{
        type:MINUS_SOMETHING
    }
}  

 

 

리듀서?

 

• state에 변화를 일으키는 실질적 수행 

 

• 현재의 state와 action을 인자로 받아 store에 접근해 action에 맞춰 state 변경   (⭐x 100 중요)

 

const initialState={
    count:0
}

const somethingReducer=(state=initialState,action)=>{
    switch(action.type){
        case ADD_SOMETHING:
            return{
                ...state,
                count:state.count+1
            }
        case MINUS_SOMETHING:
            return {
                ...state,
                count:state.count-1
            }
        default:return state    
    }
}

 

 

 

스토어?

 

• 스토어는 state를 확인해 view에게 변경사항 알려주는 역활

 

 

 

디스패치?

 

• 리듀서에게 action 발생하라고 시키는 역활

 

• dispatch 함수는 action을 인자로 넘긴다

 

 

 

useSelectior?

 

• 리덕스 상태값 조회하기 위한 hook 함수로 이전의 connect mapStateToProps와 유사

 

const {count} =useSelector(state => state.count); 
//store state 값 가져온다

 

 

 

useDispatch?

 

• 생성한 action을 useDispatch를 통해 발생시킬수 있다

 

import {addSomething,minusSomething} from "../redux"

... 생략

const dispatch=useDispatch();      //디스패치 생성

const onAddSomething= ()=> dispatch(addSomething());
const onMinusSomething= ()=> dispatch(minusSomething());


...생략

return(
<>
<button onClick={onAddSomething}>+</button>
<button onClick={onMinusSomething}>-</button>

</>
)

 

클릭시 dispatch가 이루어 지도록한다.

 

 

 

 

 

출처: 

https://mjn5027.tistory.com/33

[ React ] 리액트 리덕스(Redux)란?