[React] redux 설정하기

1. 리덕스 설정

vscode터미널에 아래 명령어를 입력

yarn add redux react-redux

(redex와 react-redux를 동시설치하는 명령어)

 

2. 폴더구조 생성하기

src 폴더 안에 redux 폴더 생성

redux 폴더 안에 config, modules 폴더 생성

config폴더 안에 concfigStore.js 파일 생성

 

폴더설명

redux : 리덕스와 관련된 코드를 모두 모아 놓을 폴더

config : 리덕스 설정과 관련된 파일들을 놓을 폴더

configStore : "중앙 state 관리소" 인 store를 만드는 설정 코드들이 있는 파일

modules : 우리가 만들 state들의 그룹

 

3. 설정 코드 작성

configStore.js 에 아래 코드 삽입

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store;

 

 

 

index.js 에 아래 코드 삽입

// 원래부터 있던 코드
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

// 우리가 추가할 코드
import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

	//App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}>
    <App />
  </Provider>
);

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

 

 

리액트에서 리덕스를 사용하려면 redux와 react-redux가 필요하다.

설정코드는 지금 당장 이해 할 필요가 없다.

configStore.js 를 Store라고 부른다.

모듈이란 state들의 그룹이다.