바닐라 Redux 간단 핵심 사용법

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

Redux CDN load

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

Redux 쪽 요소 다이어그램

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 = ` ${title} ` } ... const store = Redux.createStore(reducer); store.subscribe(showItems);

from http://rudalson.tistory.com/225 by ccl(A) rewrite - 2020-03-11 19:20:15