store

state가 관리되는 오직 하나뿐인 저장소의 역할을 한다
Redux 앱의 state가 저장되어 있는 공간이이며, createStore 메소드를 활용해 reducer를 연결하는 방법이다
createStore와 더불어 다른 리듀서의 조합을 인자로 넣어서 스토어를 생성할 수 있다
(미들웨어와 Redux devtools 지원을 위해 두번째 인자에 추가적인 내용이 들어간다)

Store 설정 설명

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 와 compose

리덕스 개발자도구와 미들웨어를 사용하기 위해서 window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ 를 사용한다
(크롬 확장 프로그램에 작성되어있는 자바스크립트 함수)
만약에 리덕스 개발자도구가 설치되어있지 않다면 일반 compose 를 사용

compose가 하는 일은 깊이 중첩된 함수 변환을 길게 늘어진 코드 없이 작성하게 해주는 것 뿐 이다

enhancer란
enhancer란 말 그대로 redux의 기능을 도와주는 미들웨어나 데브 툴즈와 같은 것들을 말한다

applyMiddleware란

// 일반적으로 sotre를 생성하는 방법
const sotre = createStore(reducer);

// applyMiddleware를 활용하여 미들웨어를 거쳐가도록 하는 store 생성법
const store = createStore(RootReducer, applyMiddleware(promiseMiddleware, ReduxThunk))

redux-thunk, redux-promise를 미들웨어로 사용
미들웨어란, 액션과 리듀서 사이에 존재한다, 특정 액션을 가하고 리듀서가 처리하기 전에 작업을 처리한다

일반적으로 React에서 redux를 사용한다고 하면 다음과 같이 4개를 사용한다

redux-thunk나 promise는 미들웨어다

thunk 대신 redux-saga를 쓰는 경우도 있지만 우선은 간단하게 thunk와 promise를 사용하자

redux
react-redux
redux-thunk : dispatch에게 함수 형식을 대처하게 한다
redux-promise : dispatch에게 프로미스 형식을 대처하게 한다

일반적인 redux에서는 객체 형태만을 받아들이지만 프로미스와 함수 형식을 대처할 수 있도록 미들웨어로 처리를 해서 다음과 같이 store를 만들어 준다

compose를 사용해 enhancer를 만든다
Next에서 사용한 코드라서 withRedux 같은 게 붙긴 했지만,
기본적으로 compose는 순차적으로 함수를 적용해나가는 gulp의 pipe 같은 역할을 한다

import { compose, createStore, applyMiddleware } from "redux";
import rootReducer from '../reducers/index';
import thunk from "redux-thunk";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose;

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

export default store;

redux store 패키지 적용

1. rootReducer 를 import 하여 createStore 함수안에 넣어준다

import rootReducer from "./modules"

const store = createStore(rootReducer, [])

2. Provider 컴포넌트를 사용하여 프로젝트에 리덕스를 적용한다

import { Provider } from "react-redux"
import store from './store/store';

ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById("root")
)

3. Redux DevTools(리덕스 개발자 도구) 를 크롬확장 프로그램에 설치한다

yarn add redux-devtools-extension
npm i redux-devtools-extension

import { composeWithDevTools } from "redux-devtools-extension"

const store = createStore(rootReducer, composeWithDevTools())

Redux DevTools(리덕스 개발자 도구) 를 크롬확장 프로그램에 받아서 사용

window.__REDUX_DEVTOOLS_EXTENSION__&&window.__REDUX_DEVTOOLS_EXTENSION()

redux DevTools 관련 (2번 방법 사용법이 나와있다)

1 은 실패 .. 왜 안되는 건지 모르겠다

imaport { createStore } from "redux"

const store=createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__&&window.__REDUX_DEVTOOLS_EXTENSION() 

export default store;

2 추천

import { compose, createStore, applyMiddleware } from "redux";
import rootReducer from '../reducers/index';
import thunk from "redux-thunk";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
  : compose;

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));
// console.log('store', store)

export default store;