Redux

Redux -

전역 글로벌하게 상태를 저장할 수 있는 곳을 만들고 어떤 컴포넌트든지 쉽게 접근 가능하게 해주면서 상태관리를 쉽게 해준다!

 

리액트만 사용했을때는 1,2,3,4 로 옮기기 위해서 prop를 통해서 부모컴포넌트에서 자식 컴포넌트로 값을 보내 주었다.

여러컴포넌트가 있을때는 propsDrilling을 이용하여 값을 보내주곤 했는데 컴포넌트가 만약 수백개라면 사용하는데 불편함이 있어서 리덕스를 사용한다고 한다! 리덕스는 전역에서 사용이 가능하여 원할때 값을 쉽게 빼올 수 있는 장점이 있다?

 

 

일단 리액트에서 리덕스를 사용하려면 두개의 패키지를 설치해야한다 

 

yarn = yarn add redux react-redux

npm = npm i redux react-redux

 

터미널에서 설치해주고 시작

 

리덕스 폴더를 만들고 그안에 config폴더 modules폴더를 생성한다  

 

config 리덕스 설정  configStore.js는 중앙관리소라고 생각하면 된다 // 전역상태관리로 받을 수 있는 store?

 

modules우리가 만들 state 의 그룹!!!  모듈저장소 

 

----------------------------counter 만들기

 

const initialState = {

  number: 0,

};

초기 상태값을 의미한다     // 객체가 아니여도 배열 형태도 가능하다.

 

-리듀서   -- 변화를 일으키는 함수 이다?

const counter = (state = initialState, action) => {

console.log(action);

switch (action.type) {

case "PLUS_ONE":

return { number: state.number + 1 };

case "MINUS_NUM":

return { number: state.number - 1 };

default:

return state;

}

};

리듀서는 저번 리액트에서 setState 를 통해서 카운터를 올려주는 역활을 했으면

리듀서는 지금 이 역활을 대신 해준다!

 

state는 initialState, action 으로 넘겨준다?

액션에 맞게 데이터를 수정하고 스토어에 있는 데이터를 바꿔주는 역활을 리듀서가 한다!

 

configStore 탭에 들어가서!!

const rootReducer = combineReducers({

counter: counter,

});

 

만들어둔 couter module을 configStore에 연결 시켜준다!

다른 모듈이 생길때 똑같은 방식으로 추가 해주면 된다!

 

연결이 잘 되어있는지 확인 하려면 useSelector를 이용하여 확인 하면 된다

 

reducer로 보낼때는 type객체형태로 보내야 한다

const App = () => {

const dispatch = useDispatch();

const number = useSelector((state) => state.counter.number);

console.log(number);

return (

<div>

{number}

<button

onClick={() => {

dispatch({ type: "PLUS_ONE" });

}}

>

+1

</button>

<button

onClick={() => {

dispatch({ type: "MINUS_NUM" });

}}

>

-1

</button>

</div>

);

};

dispatch({

type: "PLUS_NUM"     ----> 값은 대문자 형식으로 보낸다  // action객체를 보냄!

 

})

 

// 리듀서

const counter = (state = initialState, action) => {

console.log(action);

switch (action.type) {

case "PLUS_ONE":

return { number: state.number + 1 };

case "MINUS_NUM":

return { number: state.number - 1 };

default:

return state;

}

};

컴포넌트로 디스패츠를 이용하여 액션객체를 전달 

리듀서에서 type 객체를 받아서 사용한다

swich문을 이용하여 하나씩 검사해서 일치하는걸 찾는다! 

실행되서 나오는 새로운 state를 반환을 하고 , 리듀서가 새로운 스테이트를 반환하면 새로운 스테이스가 된다

type: "PLUS_NUM"이 들어왔을때 return 어떤 함수를 실행시킬지 적는다! // number: state.number + 1