어떻게 동작하는 가?
function reducer(oldState, action) {
// ...
}
var store = Redux.createStore(reducer);
function render() {
var state = store.getState(); // state값을 가져와서
// ...
document.querySelector('#app').innerHTML = ` // state값을 이용해서 UI를 만듦
<h1>WEB</h1>
// ...
`
}
store.subscribe(render);
게시글이나 댓글을 작성하면 바로 UI가 바뀔 때 (submit버튼을 통해)
<form onsubmit="
// ...
store.dispatch({type:'create', payload(title:title, desc:desc}});
">
{type:'create', payload(title:title, desc:desc} // 이 객체가 action
function reducer(state, action) {
if(action.type === 'create') { // action에 대응하는 reducer 코드
var newContents = oldState.content.concat();
var newMaxId - oldState.maxId + 1;
newContents.push({id:newMaxId, title:action.payload})
return Object.assign({}, state, {
contents: newContents,
maxId:newMaxId,
mode:'read',
selectedId:newMaxId
});
}
}
application 구현의 복잡성을 낮출 수 있다.
function reducer(state, action) { // 현재 state값 - 직접 변경하지말고, 복사 후 복사본을 변경 후 return하자 : Object.assign({}, {name:'tony'}, {city:'seoul'}); // {name:'tony', city:'seoul'}
if(state === undefined) {
return {color:'yellow'}
}
var newState;
if(action.type === 'CHANGE_COLOR'){
newState = Object.assign({}, state, {color: action.color});
}
return newState;
}
var store = Redux.createStore(reducer);
function red() {
var state = store.getState();
document.querySelector('#red').innerHTML = `
<div class="container id="component_red" style="background-color:${state.color}">
<input type="button" value="fire">
</div>
`
}
store.subscribe(red); // state값이 바뀔 때 마다 red함수가 호출
red();