Redux

Redux

리액트의 문제를 보완하기 위해 개발된 상태관리 라이브러리이다.
컴포넌트들의 state로직을 별도의 파일로 분리시켜 효율적으로 관리 할 수 있도록 해준다.

Redux가 필요한 이유

** local state의 전달 ** 이전 포스팅에서 React의 특징으로, 부모 자식 모듈 간의 데이터 전달이 가능하다고 했다.
그러나 모듈의 종속이 늘어날수록 데이터 전달만을 위한 불필요한 플로우들이 많아진다.

1

** global state의 유지 ** React로 global state 데이터를 사용하기위해서는 컴포넌트에 계속해서 전달해야하는데 이도 문제일뿐더러, 업데이트를 하게될때는 상태유지가 더욱이 어려워 지는 문제가 발생한다.

Redux 사용

Action(액션) 데이터를 store에 저장하는 방법을 정의한다. 액션객체는 필수로 type을 가지고 있어야 하며 보통 String값으로 정의한다.

const ADD_NEWS = 'ADD_NEWS' // action type 정의

function addTodo(data) {
    return {
        type: ADD_NEWS,
        data:{
            title: "NEWS Title",
            contents: "NEWS Contents"
        }
    }
}

Reducer(리듀서) 액션에대한 반응으로, 어플리케이션의 상태변화를 정의해준다.

const newsInitState={
    title: "TITLE", 
    contents: "Contents"
}

function newsReducer(newsState = initialState, action) {
    switch (action.type) {
    case ADD_NEWS:
        return {
            title: action.data.title,
            contents: action.data.contents,
        };
    default:
        return newsState
    }
}

Store(스토어)* 루트에 하나의 store 만으로 저장된다.

const store = createStore(rootReducer);