참고 블로그

React & Django 프로젝트

input태그를 이용하여 직관적으로 한줄 노트를 작성할수 있는 앱

R&D (Redux) - 리덕스 설정하기

STEP2. Redux 설정

Redux는 글로벌하게 상태관리를 할수있게 도와주는 도구

1
npm install redux react-redux redux-observable rxjs rxjs-compat

cf)
redux-observable

rxjs의 개념이 도입된 라이브러리

rxjs

RxJS는 Observable를 사용하여 비동기 및 이벤트 기반 프로그램을 작성하기 위한 라이브러리이다.

store/modules/ping.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const PING = "PING";

const initialState = {
  ping: "ping"
};

export const ping = (state = initialState, action) => {
  switch (action.type) {
    case PING:
      return {
        ping: "pong"
      };
    default:
      return state;
  }
};

store/modules/index.js

1
2
3
4
import { ping } from "./ping";
import { combineReducers } from "redux";

export const rootReducers = combineReducers({ ping });

store/configure.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { createStore, applyMiddleware, compose } from "redux";
import { createEpicMiddleware } from "redux-observable";

import { rootReducers } from "./modules";

// 크롬 데브 툴스 설정입니다.
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const epicMiddleware = createEpicMiddleware();

export default createStore(
    rootReducers,
    composeEnhancers(applyMiddleware(epicMiddleware))
);

redux-devtools 확장프로그램

실행화면

오류

No store found. -> npm start 다시 해보면 뜰거임