리덕스 개념 정리

슈퍼콜라·2022년 4월 26일
0
post-thumbnail

리덕스 개념정리
1. 액션
상태변화가 필요할때 액션이 발생되는데 액션은 하나의 객체로 표현됨
액션 객체는 type 필드가 꼭 필요하다. 어떤 동작인지 알려주는? 그런느낌

{
	type: ADD_COUNT
}
  1. 액션 생성 함수
    말 그대로 액션 객체를 만들어 주는 함수,
    상태변화를 할 때마다 매번 액션 객체를 만들어야 하는데 그게 좀 귀찮음 실수할 수도 있고
    이런걸 방지하기위해 함수로 만들어서 관리함
function addCount(data){
	return {
    	type:ADD_COUNT, // <== 액션 객체를 return 함
      	data
    }
}
  1. 리듀서
    리듀서는 상태의 변화를 일으키는 함수, 액션을 만들어서 발생시키면 리듀서가 현재 상태전달받은 액션을 파라미터로 받음. 전달 받은 파라미터를 참고해서 새로운 상태를 반환함
    다시 정리
    리듀서에게 파라미터를 넘김 (현재상태,액션)
    리듀서는 파라미터에 따라 어떤 로직을 실행할지 결정함
    로직을 실행함
    로직 실행 결과대로 새로운 상태를 반환함
    근데 액션을 어떻게 전달함? => 디스패치
function reducer(state, action) {
    switch(action.type) {
        case 'ADD_COUNT':
            return state + 1;
        default:
            return state;
    }
}
  1. 스토어
    스토어는 프로젝트에 리덕스를 적용시키기 위해 만듬.
    스토어 안에는 현재 상태와 리듀서가 들어가있고 몇 가지 중요한 내장 함수를 가지고있다
    • 디스패치
      • 디스패치는 리듀서에게 액션을 발생하라고 시키는 것
      • dispatch(action)의 형태로 액션을 받음 dispatch({type:ADD_COUNT})
      • 디스패치가 실행되면 결과적으로 리듀서 함수가 액션에 따른 새로운 상태를 만들어줌
profile
공부하는거 정리

0개의 댓글