[TIL] 2023-02-12

• 리액트에서 전역적으로 상태를 관리할 목적으로 contextAPI를 사용했었는데, 이러한 방법은 권장되지 않는다는 것을 이전에 학습했음. 그래서 이를 대신하기 위해 리덕스를 학습함 (with 시계 앱 예제)

  • 플럭스flux
    • 앱 설계 규격
    • 앱 수준 상태, 여러 컴포넌트가 공유하는 상태를 리액트 방식으로 구현하는 방법 ( == 앱을 구성하는 모든 컴포넌트가 함께 공유할 수 있는 상태)
    • 플럭스 설계 구격을 준수하는 오픈소스 라이브러리 - 리덕스redux
      
      
  • 리덕스redux
    • 리덕스 저장소 - AppState 타입 데이터를 저장하는 공간
    • 리듀서reducer - 현재 상태와 액션이라는 2가지 매개변수로 새로운 상태를 만들어서 반환함 (첫 번째 매개변수에 담긴 과거 상탯값(preState)을 바탕으로 새로운 상탯값(newState)을 반환함)
      
      

dispatch(액션) -> reducer -> 리덕스 저장소

function reducer(state, action)
		 //리덕스 저장소  //dispatch(액션)

const rootReducer = (state: AppState = initialState, action: Action): AppState => {
  swich (action.type) {
    case '액션_타입1':
    	return {...state}
    case '액션_타입2':
    	return {...state}
  }
  return state
}

//useRedcer 사용법

const [상태, dispatch] = useReducer(리듀서, 상태_초깃값);