#25 Redux UP !!!!!

 

Redux관련 디펜던시를 먼저 받아주자.

// client 폴더로 이동후
client> npm install redux react-redux redux-promise redux-thunk --save

 

여기서 redux-promise와 redux-thunk를 쓰는 이유는,

원래 store는 객체만 받을 수 있는데 promise와 function도 받을 수 있게 해주기 위해.

cleint/src/index/js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";
import promiseMiddleware from "redux-promise";
import ReduxTunk from "redux-thunk";

import Reducer from "./_reducers/index";

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxTunk)(createStore)

ReactDOM.render(
  <Provider
    store={createStoreWithMiddleware(Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
      )}
  >
    <App />
  </Provider>
  ,document.getElementById('root')
)
/*
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
*/

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en 

Redux DevTools

우선 이걸 크롬에서 다운받고 index.js를 저렇게 수정후에

 

_reducers폴더에서 index.jsx를 만들어준다.

//client/src/_reducers

import { combineReducers } from "redux";
//import user from "./user_reducer";

const rootReducer = combineReducers({
    // user,
})

export default rootReducer;