vanilla JS + redux에서 redux store 를 분리해보자

TOC

1. redux store의 분리

state를 따로 관리하는 redux에서 store가 index.jsx, App.jsx 등에 섞여있다면
이는 따로 관리하는 최대의 장점을 훼손하는 일이다.

이를 분리해 따로 관리를 해보자.

방법은 간단하다.

// index.js
import { reducer, store } from './Store';
import { getState } from 'redux';

console.log(store.getState());

// store.js
import { createStore, getState } from 'redux';

const reducer = (state, action) => {
  if (state === undefined) {
    return { name: 'undefined' };
  }
};
const store = createStore(reducer);

export { reducer, store };

store.js를 생성해 store, reducer를 생성한다.

이를 각각 export 해준다.

index.js에서는 export한 module을 각각 받아 사용한다.