-
#3-5 redux devtools 사용하기React로 nodebirdSNS 만들기 (인프런)/#3 리덕스 익히기 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는 미들웨어를 적용 // 미들웨어는 액션과 스토어 사이에서 작용됨 // 조건문같은경우 리덕스 데브툴즈를 깔으면 윈도우객체로 자동생성됨, 틀 자체는 그냥 외우면됨 거의 안바뀜'React로 nodebirdSNS 만들기 (인프런) > #3 리덕스 익히기' 카테고리의 다른 글
#3-4 redux와 react 연결하기 (0) 2020.01.08 #3-4 불변성과 리듀서 여러개 합치기 (0) 2020.01.08 #3-2 첫 리듀서 만들기 (0) 2020.01.07 #3-1 Redux 주요 개념 소개 (0) 2020.01.07