Redux 정의

Redux 정의

• 상태 관리 라이브러리(중앙 집중적 데이터 저장 방식)

• 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜 더운 효율적으로 관리

• 컴포넌트 서로 간의 상태를 공유할 때, 손쉽게 상태 값을 전달

• 미들웨어라는 기능을 통해 비동기 작업, 로깅등의 확장 작업들을 쉽게 할 수 있도록 도와줌

 

 

예제) 복잡한 컴포넌트 구조

• E 컴포넌트의 doSomething 이라는 함수에 의해 something 이라는 상태를 E -> B -> Root 전달, Root 에서는 A -> C -> F 로 전달

• props 가 필요한 곳으로 전달되게 하기 위하여, 실제로는 props 가 사용되지 않지만 전달을 위해 거쳐가야 하는 것은 리렌더링 할 때 비효율적

 

 

 

 

예제) 리덕스를 사용

• 상태와 변화 로직이 저장되어 있는 스토어를 통해, 컴포넌트에서 원하는 상태값과 함수를 주입

 

 

 

 

 

Redux 개념

 

 

 

 

store

• 정보가 저장되는 장소

• 한 애플리케이션 당 하나의 스토어

 

 

state

• 정보

• 직접 접근하는 것은 불가능

 

 

reducer

• state 를 입력값으로 받고 action을 참조해서 새로운 객체를 return

• return 을 해주는 객체는 새로운 state의 값 => render 호출(subscribe)

function reducer(state, action) {
    switch(action.type) {
        case 'CREATE'
            return ...
        case 'UPDATE'
            return ...
        default
            reutrn ...
    }
}

 

 

render

• 화면에 보여주는 역할

• state 값을 참조하여 UI 구성

function redner(){
    const state = store.getState();
    ...
    document.querySelector('root').innerHTML = `<h1>Hello World!</h1>`;
}

 

 

dispatch

• reducer를 호출하여 state 값을 바꿈

• 현재의 state, action 데이터 전달

• subscribe를 이용하여 화면 갱신

store.dispatch({type: 'CREATE', payload: {name: 'TEST', age: '23'}});

 

 

subscribe

• store의 state의 값이 바뀔때 마다 render 함수 호출하도록 하는 함수

store.subscribe(render);

 

 

getState

• 정보를 가져오는 함수

 

 

 

 

 

 

 

참조

https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt