Redux 생활코딩 #1
Redux
Redux는 중앙관리 시스템이라고 이해하면 편하다.
Reducer
Redux는 중앙관리 시스템이라고 이해하면 편하다.
state에 직접적으로 접근을 하지못하게 해놓았기 때문에 ( 캡슐화떄문인듯 ) getter와 setter를 통해 접근한다. 그런데 setter에 있어서 setter를 관리해주는 것이 reducer.
reducer는 state를 입력값으로 받고 action을 참조해서 setter를 만들어내는 가공자
reducer 사용 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.js"></script>
</head>
<body>
<style>
.container {
border: 5px solid black;
padding: 10px;
}
</style>
<div id="red"></div>
<script>
function reducer(state,action){
if(state=== undefined){
return{color:'blue'}
}
}
var store = Redux.createStore(reducer);
console.log(store.getState().color)
function red(){
document.querySelector('#red').innerHTML= `
<div class="container" id="component_red" style="background-color: ${store.getState().color}">
<h1>red</h1>
<input type="button" value="fire" onclick="
document.querySelector('#component_red').style.backgroundColor='red';
">
</div>
`
}
red();
</script>
</body>
</html>
redux에서 reducer의 값을 참조해서 state의 값을 결정한다( 결정되는 값은 store값). reducer는 action과 state의 parameter값을 참조한다.
Author And Source
이 문제에 관하여(Redux 생활코딩 #1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@camel-man-ims/Redux-생활코딩-1
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.js"></script>
</head>
<body>
<style>
.container {
border: 5px solid black;
padding: 10px;
}
</style>
<div id="red"></div>
<script>
function reducer(state,action){
if(state=== undefined){
return{color:'blue'}
}
}
var store = Redux.createStore(reducer);
console.log(store.getState().color)
function red(){
document.querySelector('#red').innerHTML= `
<div class="container" id="component_red" style="background-color: ${store.getState().color}">
<h1>red</h1>
<input type="button" value="fire" onclick="
document.querySelector('#component_red').style.backgroundColor='red';
">
</div>
`
}
red();
</script>
</body>
</html>redux에서 reducer의 값을 참조해서 state의 값을 결정한다( 결정되는 값은 store값). reducer는 action과 state의 parameter값을 참조한다.
Author And Source
이 문제에 관하여(Redux 생활코딩 #1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@camel-man-ims/Redux-생활코딩-1저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
