생각기록
2023-01-26 순수 리덕스 과정 본문
( 어떤 어플리케이션의 )
Stroe 정보 저장되는 곳 > 은행
state 실제로 정보가 저장되는 곳 > 금고
getState 리엑트리덕스에 없는 개념이지만, 스테이트를 가져오기 위해 사용하는 것 ( 객체 접근 함수 )
Subscribe ( 순수 리덕스 스테이트 바뀔 땜다 리랜더링 되는 얘 )
render를 등록해?
Dispatch State의 값을 바꾸고 싶을때 호출 하는 얘 ( 디스패치가 리듀서라는 함수를 호출 할 때 두개의 값을 보낸다. 첫번째 값이... state(현재), 두번쨰는 action)
변경된 state를 반환해준다.
cdn 가져오기
store 만들기
만들때 등록해야 하는 한가지
리듀서라는 함수를 미리 만들어 등록해야 한다.
state(현재), 액션 참조해 값을 바꾸고 변경된 스테이트 return
기본값 설정
기본 컬러는 오렌지다!
store에 reducer를 등록
맨 밑에
getState로 컬러 값을 알림창에 띄운다.
red() 함수 안에서
스토어의 값을 가져와서 담겨있는 color의 값으로 컴포넌트 red의 값을 바꾼다.
현재 색깔값을 적용 됬다.
이제 진짜 red 실행을 누르면, 빨강으로 바뀌도록 하려면
red() 함수 대신 store.dispatch로 바꾼다.
인자에 정보를 넣어준다.
리듀서에서 액션이 잘왔는지 확인
console 찍고
하지만 state가 바뀌었다고 색이 바뀌지 않는다
순수 리덕스는 리랜더링이 안되기 때문에..
다시 불러오도록 등록해야한다 그것이 subScribe 함수 입니다.
변경이 됩니다.
1. redux를 사용할 준비
-redcer 함수 만들기
- redcer 함수 이용해 store 만들기
- 만들어진 store 안의 subscribe 함수를 이용해 state가 변경되었을 때마다 실행할 함수 등록하기
셋팅 완료 후
2. red 에 있는 "실행"버튼을 클릭
store.dispatch({ type: 'CHANGE', color: 'red'});
// 여기까지 사용자가 하는 일
3. store.dispatch 함수를 실행
-dispatch가 현재 state와 전달받은 action으로 reducer 함수를 호출
-reducer 함수는 전달받은 action을 이용해 state를 변경
-reducer 함수는 변경된 state를 return 합니다. > dispatch가 받는다 ( 디스패치가 리듀서를 호출했으니까 반환값도 디스패치가 받는다.)
-dispatch는 reducer에게 state를 전달 받은 후 subscribe 에 등록된 함수를 실행한다. ( 전달받았다는 것은 state가 변경되었다! ) 반환받으면 디스패치는 완료됬다고 생각하고 subscribe를 실행
디스패치 입장에서는 스테이트 변경이 끝났고 뭘 실행해야 할지 모릅니다 ( 순수 리덕스 )
subscribe에 등록된 것들만 실행을 합니다. ( 등록된게 없으면 실행하는 것이 없다 )
위에 우리는 래드 함수를 등록했기때매 래드 함수가 실행되어 div가 빨갛게 변하는 것 이다.
div 하나하나가 컴포넌트
<html>
<head>
<style>
.container {
border: 3px solid black;
padding: 10px;
width: 100px;
height: 100px;
}
</style>
<!-- 리액트 cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.0/redux.min.js"></script>
</head>
<body>
<div id="red">
<div class="container" id="component_red">
<h1>red</h1>
<input type="button" value="실행" onclick="
store.dispatch({ type: 'CHANGE', color: 'red'});
">
</div>
</div>
<div id="green">
<div class="container" id="component_green">
<h1>green</h1>
<input type="button" value="실행" onclick="
store.dispatch({ type: 'CHANGE', color: 'green'});">
</div>
</div>
<div id="yellow">
<div class="container" id="component_yellow">
<h1>yellow</h1>
<input type="button" value="실행" onclick="
store.dispatch({ type: 'CHANGE', color: 'yellow'});">
</div>
</div>
<script>
function reducer( state = { color: 'orange' }, action) {
console.log(action);
// 만약 change면 변경 액션 컬러로 스테이트를 변경한다.
if ( action.type == 'CHANGE') return { color: action.color };
return state;
}
var store = Redux.createStore(reducer);
function red(){
var state = store.getState();
document.querySelector('#component_red').style.backgroundColor = state.color;
}
function green(){
var state = store.getState();
document.querySelector('#component_green').style.backgroundColor = state.color;
}
function yellow(){
var state = store.getState();
document.querySelector('#component_yellow').style.backgroundColor = state.color;
}
// getState 스토어의 state 를 가져온다.
// alert( store.getState().color);
store.subscribe(red);
store.subscribe(green);
store.subscribe(yellow);
</script>
</body>
</html>
'강의 정리 > React JS' 카테고리의 다른 글
| axios, post 데이터 인식을 못하는 이유 (0) | 2023.01.30 |
|---|---|
| git 머지 관련 오류 .. 셋팅 댓글달지 않게 하기 (0) | 2023.01.28 |
| 2023-01-19 / 개발자 MBTI 조사 / React Redux (0) | 2023.01.19 |
| 2023-01-19 / React Redux 첫 수업/ to do list 만들기 (0) | 2023.01.19 |
| 구조 분해 할당 (0) | 2023.01.18 |
