상태관리 Redux <리덕스>

redux?

상태관리 라이브러리 중 하나로, 단 방향 데이터 흐름[flux]을 제공한다.

redux를 사용하는 이유?

여러 컴포넌트에서 상태를 공유 하고자 하기 때문!

각 컴포넌트에 종속되어 있는 State는 굳이 리덕스 스토어로 관리할 이유는 없습니다!!

단방향

dispatch(action) => middleware => reducer => store

example

const {createStore} = require("redux");

const initialState = {
  compA:'a',
  compB:'b',
  compC:'c'
}

const obj = {
  actionA:(state, data)=>({ ...state, compA:data}),
  actionB:(state, data)=>({ ...state, compB:data}),
  actionC:(state, data)=>({ ...state, compC:data})
}

const reducer = (state,{type, data}) => obj[type] ? obj[type](state, data) : state

const store = createStore(reducer,initialState)

store.subscribe(()=>{
  console.log("gogo")
})

const changeComp = (type) => (data) => ({
  type,
  data
})

const changeCompA = changeComp('actionA')
const changeCompB = changeComp('actionB')
const changeCompC = changeComp('actionC')

store.dispatch(changeCompA(10))
store.dispatch(changeCompB(100))
store.dispatch(changeCompC(9))
console.log("store.getState() :",store.getState())