[Redux] 리덕스

괴발·2022년 8월 10일
0

Redux 리덕스란 무엇인가?


상태관리저장소.

리덕스는 하나의 저장소 (store) 안에 있는 객체트리에 state를 저장하는 것.

저장된 state값을 변경할 유일한 방법은
무슨 일이 일어날지를 서술한 객체 "액션(action)"보내는 것 뿐이다.

액션을 받아 객체를 변경하는 것은 "리듀서(reducer)"가 담당한다.




🟣 State

리덕스에서 저장하고 있는 상태값(데이터)
딕셔너리 형태로 { [ key ] : value } 값을 갖는다.


🟣 Action

갖고있는 데이터가 변경될 때 발생하는 것.
액션은 객체, type은 이름표 같은 것.

리덕스 안의 데이터를 수정하고 싶을 때는 🏷 나 이거 수정할게! 라고 말하고 실제로 데이터를 수정하고 알려줘야 함.

  • 'Action을 일으킨다.' = 🏷 나 이거 수정할게! = type
  • 나 이거이거 바꿀거다! = 객체 안 내용
	{type : "CHANGE_STATE" , data {...} }

type : "CHANGE_STATE" = '🏷 나 이거 수정할게!'라는 이름
data {...} = 내가 바꿀 데이터


🟣 Action Creator

액션생성함수 => 액션을 만들기 위해 존재한다.

액션을 return해주는 함수

const changeState = (new_data *여기에 뭔가를 넣으면* ) => {
  	return {
      type : "CHANGE_STATE"
      data : new_data
    }
}

new_data 를 이렇게 저렇게 작업해서 '액션객체'라는 걸로 만들어서 return 한다.
그걸 changState 라고 부르겠다.
=>이걸 왜 하나? => 전역으로 데이터를 바꾸고 싶으니까!


🟣 Reducer

데이터를 실제로 바꾸는 곳.

Action을 dispatch 하면 자동으로 Reducer가 실행된다.
Reducer는 Action이 '바꿔줘'라고 한 내용에 맞게 data를 변경한다.


const initialState = {
  name : 'velog'
}

function reducer (state = initialState, action) {
	switch (action.type){
      case CHANGE_STATE :
        return {name : 'velog'};
        
      default:
        return false;
    }
}

( state = initialState, action )
Parameter = 매개변수

case CHANGE_STATE
'어떻게 바꿔줘'의 이름 = action
ㄴ case 별로 = 각 action 마다 다른 처리를 할 수 있다.


🟣 Store

store 안에는 state만 있는 게 아니라 Reducer들과 내장함수인 getState, dispatch, sudscribe 도 있다.






dispatch 는 action을 발생시킨다. => '나 이거 바꿔줘' 를 요청한다.
실제로 변경을 맡은 건 Reducer 이다.






< 정 리 >

profile
괴발개발

0개의 댓글