그냥 사는 이야기

바닐라 Redux 간단 핵심 사용법 본문

Development/개발언어

바닐라 Redux 간단 핵심 사용법

없다캐라 2020. 12. 9. 18:13
반응형

Redux를 React같은 라이브러리를 사용하지 않고 순수 Javascript에서 사용하는 법에 대해 핵심만 정리 해보았습니다.

Redux CDN load

별도로 npm으로 인스톨 하지 않고 바로 연습해보려면 CDN load로 해볼 수 있습니다. 현재는 redux-4.0.5 사용

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
</head>

Redux flow 다이어그램

Store 생성

최종 상태값을 가지고 있는 store를 생성해줘야 합니다. 그런데 store는 reducer를 반드시 필요로 합니다. 그래서 reducer()를 만들어 줍니다.

function reducer(state, action) {
    if (state === undefined) {
        return {
            items: [
                {id: 1, title: 'redux1'},
                {id: 2, title: 'redux2'},
            ]
        }
    }

    let newState = {};
    ...
    return newState;
}

const store = Redux.createStore(reducer);

reducer function을 만든 후 밑에서 바로 createStore()로 store를 생성합니다.

State 확인(Accessor)

state내용을 가져오는 것은 store에서 getState()로 가능합니다.

let state = store.getState();

State 수정(Mutator)

state값 수정(mutation)은 이렇게 action 값들을 인자로 주고 dispatch()를 호출합니다. actino이라는 것은 변경될 값들을 담은 것입니다.

let action =  {type:'CLICKED', id:1};
store.dispatch(action);

dispatch()가 호출되고 나면 redux내부적으로 reducer가 또 다시 호출됩니다. reducer에서는 필요한 값을 받아서 Object.assign()으로 state값을 갱신시켜 줍니다.

function reducer(state, action) {
...
    if (action.type === 'CLICKED') {
        newState = Object.assign({}, state, {selected: action.id});
    }
...
}

Object.assign()의 2번째는 previous state, 3번째는 new state입니다. 그렇다면 첫번째는???

배열값 수정

배열값을 수정(여기서는 추가) 하려면

newState = Object.assign({}, state, {selected: action.id});

처럼 해도 되지만 배열(혹은 리스트) 값에서 뒤에 추가할 때는 아래의 형태대로 추가 시켜 줍니다.

let items = state.contents.concat();
items.push({id: state.items.length + 1, title: action.title});
newState = Object.assign({}, state, {items, selected: state.contents.length + 1
});

Subscribe 등록

state가 변경되어서 다시 rendering 되게 하려면, render할 함수를 subscribe에 인자로 줘서 아래처럼 등록해 줍니다.

function showItems() {
    let state = store.getState();
    ...

     document.querySelector('#items').innerHTML = `
            <itemDetail>
                <h2>${title}</h2>
            </itemDetail>
        `
}

...
const store = Redux.createStore(reducer);
store.subscribe(showItems);

 

저작자표시

'Development > 개발언어' 카테고리의 다른 글

python으로 image 처리를 위한 exif 정보 다루기  (0) 2020.11.24
Python으로 telegram bot을 만들기 위해 뜸들이는 글  (2) 2020.11.23
Python3 venv 사용하여 가상환경 구성하기  (0) 2020.11.19
ERROR: Could not find a version that satisfies the requirement tensorflow - python3.8  (2) 2020.11.18
리눅스 bash 확장과 인용  (0) 2020.10.12
'Development/개발언어' Related Articles more
Comments