useReducer

const  [state, dispatch] = useReducer(reducer, initialState )

const onClickTable = useCallback(() => {
	dispatch({ type: 'SET_WINNER', winner: 'O'}) 
})

• dispatch에 action을 넣어준다.

• action을 해석해서 state를 바꿔주는 역할이 reducer

• action을 dispatch할 때마다 reducer가 실행

• dispatch에서 state를 바꾸는것은 비동기이다 때문에 아랫줄에서 state값을 넣어봐도 값이 바뀌기 전의 값이 나온다.

비동기 state에 따라서 무언갈 처리할 때에는 useEffect사용

const reducer = (state, action) => {
	switch (action.type) {
    	case 'SET_WINNER' :
        return { // state를 어떻게 바꿀지 
        	...state, // 기존 state를 얕은 복사 후
            winner: action.winner, //바뀔 부분만 새로 바꿔줌
        }
    }
}

• state.winner = action.winner 이렇게 직접 state를 바꾸면 안됨

• action type은 상수로 분리하며 그 상수는 항상 export해줘서 사용하는 곳에서 import해서 사용

 export const SET_WINNER = 'set_winner';
 
 //사용
 
 import SET_WINNER from '경로'

불변성

• 객체를 직접 변경해서 값을 바꾸면 안된다(배열 포함)
• 객체는 항상 얕은 복사를 한 뒤 변경할 값만 바꿔야 한다.
• immer 라이브러리 사용해서 가독성 해결

 //2차원 배열일 때
 
 const tableData = [...state.tableData] 
 //복사먼저 한 뒤
 
 tableData[action.row] = [...tableData[action.row]] 
 // 2차원 배열이라 action.row부분을 다시 ...으로 펼쳐서 값을 복사
 
 tableData[action.row][action.cell] = state.turn 
 //그다음 값을 바꿔준다.

Redux와 차이점

• redux는 state가 동기적으로 바뀐다.

• reducer는 state가 비동기적으로 바뀐다.

  비동기인 state에 따라 값을 처리할 경우

• useEfect를 사용하여 처리한다.