[React] Redux 설치, 사용법

Redux를 사용하면

중간에 컴포넌트를 거치지 않고

중앙 저장소 (Global state) 를 활용해서 데이터를 주고받을 수 있게 된다.

 

useState로 생성한 State는 Local State이고,

Redux에서 생성한 State는 Global State이다.

 

 

1. Redux 설정

 

(1) Redux 설치

yarn add redux react-redux

 

 

폴더 구조

redux 폴더 -> config 폴더 -> configStore.js 파일
	-> modules 폴더

 

redux : 리덕스 관련 코드 모두

config : 리덕스 설정 관련 파일 전부

configStore : 중앙 state 관리소

modules : state의 그룹

 

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

const rootReducer = combineReducers({
	// 여기에 State 모음들을 넣을 것
}); 
const store = createStore(rootReducer); 

export default store;

 

이렇게 파일을 export 하고

index.js 파일에서 import 를 한다.

 

그리고 아래 코드를 추가해주면 된다.

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

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

 

 

2. Redux 응용

 

Reducer란?

State에 변화를 일으키는 함수

매개변수에 state와 action이 들어간다.

State를 action의 type에 따라 변경하는 함수

 

action 에는 type과 value가 들어있으며

state를 '어떻게 수정할건지' 정해주는 객체이다.

 

그리고 state는 초기값을 지정해줄 수 있다.

* 아래 코드 참고

 

(1) 리듀서 생성

const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter;

 

 

 

(2) Store 연결

이렇게 만든 리듀서를

configStore에 import 해주고

rootReducer에 key : value 형태로 넣어주면

스토어에 모듈을 연결할 수 있다.

// src/redux/config/configStore.js


// 원래 있던 코드
import { createStore } from "redux";
import { combineReducers } from "redux";

// 새롭게 추가한 부분
import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // <-- 새롭게 추가한 부분
});
const store = createStore(rootReducer);

export default store;

 

 

 

 

(3) Store 조회

useSelector라는 Redux Hook을 사용하면 된다

 

// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number = 

// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다. 
const number = useSelector((state) => {
	console.log(state)
	return state
});

 

 

 

(4) Dispatch로 State변경

dispatch의 역할

중앙 저장소에 변경값을 전달하는 것

 

dispatch를 가져오는 방법

 

A. 리듀서에서 case를 추가하기

const counter = (state = initialState, action) => {
  switch (action.type) {
  	case "PLUS_ONE" :
    	return {
        	number : state.number + 1
        };
   	case "MINUS_ONE" {
    	return {
        	number : state.number - 1
        };
        
    default:
      return state;
  }
};

export default counter;

 

 

B. App 컴포넌트에서 Dispatch 생성, dispatch 를 통해  action 객체 전달하기

const dispatch = useDispatch(); // dispatch 생성

	<button
		onClick={() => {
			dispatch({ type: "PLUS_ONE" }); 
		}}
	>
	+ 1
	</button>