#3-5 redux devtools 사용하기

정중식 2020. 1. 8. 13:44

- 구글 크롬에서 redux를 설치

- 코드를 몇개 추가해줘야 리덕스 데브툴즈를 제대로 사용할 수 있다.

// 기존 컴포넌트의 기능을 확장해준다.
// NodeBird= ({store})에서 store를 props로 넣어준다
export default withRedux((initialState, options) => {
  const middlewares = []; // 이부분만 바뀜
  const enhancer = compose(
    applyMiddleware(...middlewares),
    !options.isServer &&
      typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined"
      ? window.__REDUX_DEVTOOLS_EXTENSION__()
      : f => f
  );
  const store = createStore(reducer, initialState, enhancer);
  return store;
})(NodeBird);

// compose가 여러개의 미들웨어를 합성
// applyMiddleware는 미들웨어를 적용
// 미들웨어는 액션과 스토어 사이에서 작용됨
// 조건문같은경우 리덕스 데브툴즈를 깔으면 윈도우객체로 자동생성됨, 틀 자체는 그냥 외우면됨 거의 안바뀜

- 개인적으로 그래프큐엘의 플레이그라운드? 같은것 같다.

- 제로초는 이 기능을 타임머신이라고 하는데, state의 기록이 남아서 수정된 state의 기록들을 거슬러 올라갈 수 있어서 그렇게 부른다고 한다.

- 이 '타임머신' 기능 때문에 개발할 때 엄청 편하다고하는데(에러를 찾기 쉬움) 아직 까지 난 잘 모르겠다.

- _app.js 전체적인 코드

import React from "react";
import Head from "next/head";
import PropTypes from "prop-types";
import withRedux from "next-redux-wrapper";
import AppLayout from "../components/AppLayout";
import { createStore, compose, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import reducer from "../reducers";

const NodeBird = ({ Component, store }) => {
  return (
    <Provider store={store}>
      <Head>
        <title>NodeBird</title>
        <link
          rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.16.2/antd.css"
        />
      </Head>
      <AppLayout>
        <Component />
      </AppLayout>
    </Provider>
  );
};

NodeBird.propTypes = {
  Component: PropTypes.elementType,
  store: PropTypes.object
};

// 기존 컴포넌트의 기능을 확장해준다.
// NodeBird= ({store})에서 store를 props로 넣어준다
export default withRedux((initialState, options) => {
  const middlewares = []; // 이부분만 바뀜
  const enhancer = compose(
    applyMiddleware(...middlewares),
    !options.isServer &&
      typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== "undefined"
      ? window.__REDUX_DEVTOOLS_EXTENSION__()
      : f => f
  );
  const store = createStore(reducer, initialState, enhancer);
  return store;
})(NodeBird);

// compose가 여러개의 미들웨어를 합성
// applyMiddleware는 미들웨어를 적용
// 미들웨어는 액션과 스토어 사이에서 작용됨
// 조건문같은경우 리덕스 데브툴즈를 깔으면 윈도우객체로 자동생성됨, 틀 자체는 그냥 외우면됨 거의 안바뀜

저작자표시 (새창열림)