Redux(2) - 구성요소
Store
store는 state가 담긴 하나의 저장공간(및 관리공간)입니다. store는 두개 이상일 필요가 없습니다. redux 자체가 하나의 공간에서 state를 관리하기 위해서 사용되기 때문입니다! (redux의 1원칙)
import createStore from "redux";
.
.
.
const store = createStore(Reducer);
Action
app의 state를 가지고 있는 데이터의 묶음입니다. state.dispatch()를 통해서 스토어에 액션을 보내줄 수 있습니다.
action은 type을 가지고 있고 type은 reducer에서 유용하게 사용됩니다. action 자체는 객체를 리턴하게 됩니다. (redux의 2원칙, 즉 읽기 전용을 위해)
export const ADD_VALUE = "ADD_VALUE"
export const plusone = (value) =>{
return {
type : ADD_VALUE,
payload : {
value
}
}
}
Reducer
Action 그 자체는 변화할 값만 알려주지만 실제로 값을 변화시키는 함수를 작성하는 것은 Reducer가 맡게 됩니다. action은 dispatch로 넘겨준다고 했는데 Reducer는 action에 옷을 입혀서 무슨 기능을 할 지를 예상시키게 도와줍니다.
Reducer는 state와 action을 인자로 가지고
switch를 통해 action에 따라 기능을 달리 하도록 도와줍니다.
단! reducer는 순수 함수입니다! (redux의 3원칙)
import ADD_VALUE from ".../index"
const valueReducer = (state, action) => {
switch(action.type){
case ADD_VALUE :
return {...state, values : state.value + action.payload.value}
default :
return state;
}
Dispatch
Action이 Reducer를 통해서 준비가 되었다면 dispatch를 통해서 주요 기능에 전달되게 됩니다.
const handleAddValue = (value) => {
store.dispatch(plusone(value))
};
//app.js에서 기능을 정의하지 않고도 handleAddValue를 만들 수 있게 되었습니다.
Author And Source
이 문제에 관하여(Redux(2) - 구성요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gkdlvj1214/Redux2-구성요소저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)