redux다운로드/ createStore/ Reducer/ extention

 

1. redux dependencies 다운로드

redux

react-redux

redux-promise, redux-thunk

: store에서 객체형식의 action만 받는데 promise, function 형식으로 오면 받을 수가 없는데 각각 이를 받는 방법을 알려주는 역할

 

 

2. app에 redux를 연결

(밑에 설명 및 reducer코드 있음.)

client > 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, provider } from 'react-redux';
import 'antd/dist/antd.css';
import { applyMiddleware, egacy_createStore as createStore } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducers';//자동으로 index.js 파일 찾아서 처리해줌

const createStoreWithMiddelware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider
      store={createStoreWithMiddelware(Reducer,
          window.__REDUX_DEVTOOLS_EXTENSTION__ &&
          window.__REDUX_DEVTOOLS_EXTENSTION__()
        )}//store안에 reducer, extention 넣어줌
    >
      <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();

 

2-1. redux의 provider을 import하고 <App />을 <Provider>태그로 감싸줌

2-2. provider 태그 안에 store을 넣어야함. createStoreWithMidderware 생성

2-3. combineReducer 생성하여 store안에 넣기

 

client > src > _reducers > index.js

combineReducer만 생성하고 실제 다른 reducer는 생성하지 않아서 주석처리 해둠.

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


/*store에 여러가지 reducer이 있음
reducer은 state가 어떻게 변하는지 보여주고 마지막 값을 리턴해주는 역할.
state이 user, subscribe등 여러가지에 대한게 존재해서 이에 따라 reducer도 여러가지

combineReducer을 이용해 Root Reducer에서 하나로 합쳐준다.
*/
const rootReducer = combineReducers({
    //user,
    //comment,
})

export default rootReducer;

 

2-4. extenstion다운하여 store안에 넣기

redux extention을 브라우저에 검색

 

chrome에 추가

 

*createStore 취소선

@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

 

 @reduxjs/toolkit의 권장사용을 유도하기 위해서 createStore에 취소선이 그인 것으로 아래와 같게 수정함.

 

* React.StrictMode

자동으로 태그가 생성되어서 검색해본 결과로 지워도 에러 발생x

리액트 공식문서 소개

"StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. 

Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다."

 

잠재적인 문제의 종류

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사