스토어(상점같은 판매자와 구매자 역활) 데이터를 모아두어 필요한 컴포넌트에서 데이터를 스토어에서 가져가서 사용하는 시스템.
중앙관리되는 데이터를 가져다 씀으로서, 데이터 누락, 무한화면그리기 없이 깔끔하다.
공식문서 링크
$ npx create-react-app [프로젝트명] --template redux
리액트 프로젝트를 이제 시작하려 한다면! CRA(create-react-app) 과 템플릿 지정으로 리덕스를 시작할 수 있다. react-redux 플젝 고고!
혹은 이미 프로젝트를 진행중이며, 리덕스를 추가하고자 한다면 아래 모듈을 설치하자!
> $ npm i redux
만약 리덕스를 프로젝트에 추가하려 한다면 위 npm 명령어를 통해 리덕스를 추가하여 사용한다.
$ npm i redux
$ npm i react-redux
리액트 프로젝트에 리덕스를 추가한다면 위 2개의 모듈 설치가 필요하다. react-redux, redux 를 설치하자!
import { createStore } from "redux";
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");
// (리듀서/Reducer)
const countModifier = (count = 0) =>{
return count;
}
// 저장소/스토어
const countStore = createStore(countModifier);
console.log(countStore.getState())
✅ Store는 data를 저장하는 곳
✅ CreateStore는 reducer를 요구함.
✅ Reducer는 data를 modify 해주는 함수로 reducer가 return하는 것은 application에 있는 data가 됨.
import { createStore } from "redux";
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");
// (리듀서/Reducer)
const countModifier = (count = 0, action) =>{
console.log(count, action)
//액션이있어야 데이터를 받아온다 외부에서
if (action.type === "ADD"){
return count + 1
} else if(action.type === "MINUS"){
return count - 1
} else{
return count;
}
}
// 저장소/스토어
const countStore = createStore(countModifier);
//데이터 스토어로 보내기 (예시 반응확인)
countStore.dispatch({ type: "ADD"});
countStore.dispatch({ type: "ADD"});
countStore.dispatch({ type: "ADD"});
countStore.dispatch({ type: "ADD"});
countStore.dispatch({ type: "ADD"});
countStore.dispatch({ type: "MINUS"});
console.log(countStore.getState())
✅ Action : redux에서 function을 부를 때 쓰는 두 번째 parameter 혹은 argument으로 reducer와 소통하기 위한 방법
✅ Reducer에게 Action을 보내는 방법 : store.dispatch({key: value})
import { createStore } from "redux";
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");
// (리듀서/Reducer 데이터 수정하는곳)
const countModifier = (count = 0, action) =>{
//액션이있어야 데이터를 받아온다 외부에서
if (action.type === "add"){
return count + 1
} else if(action.type === "MINUS"){
return count - 1
} else{
return count;
}
}
// 저장소/스토어(store)
const countStore = createStore(countModifier);
const handleAdd = () =>{
countStore.dispatch({type:"add"})
}
add.addEventListener("click", handleAdd ) // 방법1
minus.addEventListener("click", () => countStore.dispatch({type:"MINUS"})) // 방법2
// 출력함
const onChange = () =>{
number.innerText = countStore.getState()
}
///////변화를 감지 하고 출력해줄것을 보냄
countStore.subscribe(onChange)
✅ Subscribe : store 안에 있는 변화 감지
store.subscribe(func); // store안의 변화를 감지하면 func 실행
[코딩 완성본]
import { createStore } from "redux";
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");
//오류 확인하게 좋기위해서
const ADD = "add";
const MINUS = "MINUS"
// (리듀서/Reducer 데이터 수정하는곳)
const countModifier = (count = 0, action) =>{
//if 대신 switch 사용법 좀더 보기좋다
switch(action.type){
case ADD:
return(count + 1)
case MINUS:
return(count - 1)
default:
return count;
}
}
// 저장소/스토어
const countStore = createStore(countModifier);
const handleAdd = () =>{
countStore.dispatch({type:ADD})
}
add.addEventListener("click", handleAdd ) // 방법1
minus.addEventListener("click", () => countStore.dispatch({type:MINUS})) // 방법2
// 출력함
const onChange = () =>{
number.innerText = countStore.getState()
}
//변화를 감지 하고 출력해줄것을 보냄
countStore.subscribe(onChange)
✅ reducer : 현재 상태의 application과 함께 불려지는 function (+ with action)
return하는 것은 application의 state가 됨
✅ action : reducer와 소통하는 방법으로 Object여야 하며
그 key 이름은 항상 type임 (바꿀 수 없음)
✅ dispatch : reducer에게 action을 보내는 방법
✅ subscribe : store의 변화를 감지하면 인자값으로 준 함수를 실행
✅ switch가 자주 쓰임 [형식]
switch(action.type){
case ..blah..:
return smth2
case ..blah2..:
return smth3
default: //디폴트값 기본값
return smth
}
✅ string으로 바로 쓰는 대신에 const variable로 선언해서 사용하기 => 에러 발견 용이하다