[Redux] Reducer 셋팅법, dispatch로 데이터 수정방법

Reducer 셋팅법

let defaultState = [
  { id: 0, name: 'White and Black', quantity: 2 },
  { id: 2, name: 'Grey Yordan', quantity: 5 },
  { id: 3, name: 'Flowey', quantity: 3 }
];

const reducer = (state = defaultState, action) => {
    if() {
    	return 수정된 state
    }
    else {
    	return state
    }
}

let store = createStore(reducer);

이런 식으로 앞에 코드를 변경해준다.

Reducer는 수정된 state를 뱉어주는 함수이다.

인자에 값을 입력하지 않으면 ,default 값을 줄 수 있도록 state 데이터초기값을 넣어준다.

const reducer = (state = defaultState, action) => {
  if (action.type === '수량증가') { 
    return 수정된데이터
  }
  else {
    return state
  }
}

수량증가라는 데이터수정방법 정의한 것이다.

 

버튼을 누르면 reducer에 만들어둔 '수량증가' 요청을 하려면?

<button onClick={()=>{props.dispatch({ type: '수량증가' })}}>+</button>

데이터 수정요청을 할 때는 props.dispatch()를 한다.

 

대규모 사이트는 state가 100만개 있고, 1000만 곳에서 state를 수정한다. 

갑자기 state가 이상해지면, 1000만개의 컴포넌트를 뒤져야하는 상황이 생기는데,

리덕스에서는 데이터 수정방법을 정리 해두기 때문에, 데이터가 이상하면 해당 reducer나 dispatch를 보면서 수정하기 쉽다.

즉, state 데이터 관리가 용이하다.

 

참고

reducer가 너무 길면, 다른 js 파일로 export/import해서 쓰면된다.

 

총정리

redux에서는 useState로 state를 만들지 않고,
변수로 초기값을 만들고, reducer 안에 기본값으로 넣는다.

reducer안에 state 데이터의 수정하는 방법을 작성한다. 아무런 일이 없다면 state 바로 반환하게 한다.

* reducer에는 초기값, 데이터 수정방법을 정의한다. 항상 state를 퉤! 뱉어준다.

createStore(reducer)를 하여 변수에 저장하면 state 보관함이 완성된다.

그 state 보관함을 컴포넌트들이 공유할 수 있게 하려면 <Provider>로 감싸준다.

컴포넌트 파일 하단에 props로 등록하면, state로 등록할 수 있다. (아래 게시글 참고)

 

 

[Redux] redux 용도 및 설치방법