vanilla.js - redux

react를 통해 redux를 사용하면 action, reducer들을 설정해주었는데 vanilla.js라고 특별하게 다른 점은 없었다. 그러나 connect로 연결해주어 dispatch, state를 가져오는 것이 아닌 store의 특별한 함수를 통해서 가져온다. 이를 정리 해보겠다. 

 

기존 웹팩 설정을 해주기 귀찮아서 아래의 명령어로 react app을 만들어 주었습니다. 

yarn add create react-app 폴더 이름
yarn add redux

 

src안에 있는 기타 파일들을 삭제해주었습니다. 안쓸거니깐요!

 

redux

왼쪽) redux 없이 오른쪽) redux 사용

위의 gif를 보면 redux가 있을때와 없을 때의 차이를 확인할 수 있다. 

 

1) without Redux 

리덕스가 없으면 스테이트가 변경시 하나하나 거쳐서 변경이 됩니다. 

 

2) with Redux를 함께 사용해주면 일종의 state의 변화를 한곳에서 변경 후 필요한 곳에 뿌려줍니다. 

 

과정으로 확인해보면 1단계씩 거치던 것을 한번에 변경 후 한번에 뿌려지는 것을 통해 많은 과정이 단축되어 효율적입니다. 

 

Store 만들기 

우선 state를 관리하기 위한 store를 만들어 보겠습니다. 

import { createStore } from "redux";

const reducer = (state=[], action) => {
};

const store = createStore(reducer);

reducer는 오로지 함수여야 합니다. (only function)

 

state: 이전의 state입니다. 이 값은 계속되서 유지됩니다. 예를 들어 

const reducer = (state=[], action) =>{

}

위 코드에서 계속해서 새로운 코드를 인자로 안넣어도 []이 되는 것이 아닌 사용되는 state가 계속해서 유지됩니다. 그리고 state는 인자로의 전달이 아닌 reducer 내에서 반환하는 값이 새로운 state가 됩니다. 

 

action: state가 read only라는 규칙을 따라야합니다. 그래서 reducer에 등록된 action을 통해 서만 state를 변경할 수 있습니다. 그래서 일반적으로 action에는 변경하려는 action의 타입 및 변경하는데 필요한 값이 입력됩니다. 

 

state 불러오기

store.getState();

store변수에 getState()함수를 사용하여 불러 올 수 있습니다. 

 

state 변경하기

store.dispatch(action);

action을 변경하기 위해서는 dispatch라는 함수를 사용합니다. redux 예제에 따르면 아래와 같이 사용할 수 있습니다. (redux홈페이지 에서는 todoApp으로 예제를 들고 있습니다.)

 

dispatch

const addTodo = todo => {
  return {
    type: ADD,
    text: todo
  };
};

const removeTodo = id => {
  return {
    type: REMOVE,
    id
  };
};

const dispatchAddTODO = todo => {
  store.dispatch(addTodo(todo));
};

const dispatchRemoveTODO = e => {
  store.dispatch(removeTodo(e.target.parentNode.id));
};

addTodo와 removeTodo를 dispatch에 인자로 넘겨주었습니다. 각 인자에는 type을 전달해주어 reducer에서 type에 맞추어 state를 만들어 줍니다. 

 

reducer

const reducer = (state = [], action) => {
  switch (action.type) {
    case ADD: {
      return [{ text: action.text, id: Date.now() }, ...state];
    }
    case REMOVE: {
      return [...state.filter(data => data.id != action.id)];
    }
    default:
      return state;
  }
};

dispatch를 통해 받은 인자 == action이고 action을 통해 action에 type에 따른 새로운 state를 만들어줍니다. state는 state에 값을 추가하여 반환하는 거이 아닌 reducer에서 새로운 객체를 반환해주어야 합니다. 

 

state 변화 감지하기 

store.subscribe(함수);

reducer에서 state가 변경되면 subscribe에 등록된 함수가 실행됩니다. 

 

전체 코드

 

https://github.com/dl57934/hoony_blog_Data/blob/master/redux/todo-list/src/index.js

dl57934/hoony_blog_Data