📚 [React] Redux 연결하기 (+ redux-promise, redux-thunk)

Redux는 state를 관리해주는 툴 입니다.

 

state는
컴포넌트 안에서 데이터를 교환하거나 전달을 할때 사용하며,
mutable이기 때문에 컴포넌트 안에 자유롭게 state를 변경 할 수 있습니다.

---

Redux 설치

- redux 설치와 동시에 redux 를 잘 쓸 수 있도록 도와주는 미들웨어인 redux-promise, redux-thunk 함께 설치

npm install redux react-redux redux-promise redux-thunk --save

 

---

프로젝트에 Redux 연결

 

1. 크롬 확장 프로그램 설치

 

 

2. client/src/index.js 아래 코드 작성

// client\src\index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
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 reduxThunk from 'redux-thunk';
import Reducer from './_reducers';

const createStorewithmiddleware = applyMiddleware(promiseMiddleware, reduxThunk)(createStore);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={createStorewithmiddleware(Reducer, 
    	window.__REDUX_DEVTOOLS_EXTENSION__ && 
        window.__REDUX_DEVTOOLS_EXTENSION__() // 크롬 확장 프로그램 연결 부분)
    }>
      <App />
    </Provider>
  </React.StrictMode>
);

// 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();

 

 

 

3. client\src\_reducers\index.js 경로에 파일을 만들어준 후 아래 코드 작성

 - 예를들어 user라는 reducer를 만든다면 client\src\_reducers\user_reducers.js 파일 생성 후 주석 풀기

// client\src\_reducers\index.js

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

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

export default rootReducer;