리덕스를 처음 배울때 문서상으로만 읽고 적용해서 어렵기도 하고 까먹기도 하여서 노마드 코더에 있는 무료 강의로 다시한번 개념을 정리하는 시간을 가지게 되었다.
리덕스는 리액트에만 쓰이는 것이 아니다. Vue에서도 쓸수 있고 바닐라에서도 사용이가능하다. 이를 간과 하고 있었다.

1. 바닐라로 리덕스 사용하기

리덕스를 설치한다. Yarn 혹은 npm으로

스토어 사용

Import{createStore} from ‘redux’;

Const store = createStore(reducer);

//데이터를 저장하는 곳
// createStroe함수 안에 리듀서를 넣어줘야 한다.

Const reducer = ()=>{}

// 초기 값 함수이다.
// state 초기값을 여기서 지정이 가능하다.

Store.getState() 함수 실행으로 초기 reducer의 값을 얻을수 있다.

reducer =(state=0 )={ return state }

이렇게 리듀서를 설정해 두면 state 는 0값을 얻을수 있다.

action

리덕스에서 함수를 부를때 쓰는 두번째 파라미터
액션을 통해서 초기 state를 변경 할수 있다.

const reducer= (state, action )=> {
 return state
}

Action 사용은 dispatch로 사용이 가능하다.

store.dispatch({type:’HELLO’})
//객체 형식으로 받는다
//키값은 항상 type 으로 고정해야 한다. 아니면 오류 발생

이렇게 사용하고 reducer에서 action을받을수 있다.

— 적용

Const reducer = (state, action ) =>{
if(action.type===‘HELLO’){
Return state = ‘hello’}
}

//하지만 리덕스에서는 if문 대신에 switch 문을 일반적으로 사용한다.

switch(action.type){
	case “HELLO”:
		return ‘hello’
}

바닐라 자바스크립트에서는
Html id를 선택하고 addEventlistener로 이벤트를 등록할수 있다.
만약 클릭시에 store.dispatch()를 실행하여 액션을 실행해주면 된다.

subscribe

리덕스 store의 내장함수중의 다른 하나인 subscribe 는
현재 state 변화상태를 알수 있게 해준다.
Store.subscribe() 이런식으로 사용된다.
// subscribe 함수는 함수를 받는다.

Const onChange = ()=>{ return store.getState()} 

이렇게 사용하면된다.

바닐라에서 사용하기 위해서는
해당 html 을 id 나 쿼리 셀렉터로 가져오고
innerText 로 반영값을 넣는 함수를 만들어준다.

 Const onChange = ()=>{ html.innerText = store.getState()} 

개선사항

dispatch를 호출할때 type: 스트링 형태로 많이 쓰였는데 이렇게 쓰면
오타가 날 경우가 많다. 하지만 오류를 잡아내지 않고 실행만 안되기 때문에
디버깅하기 어려운데

const typeA = ’typeA’

이처럼 변수로 담아서 활용하면 오류를 바로잡아낼수있다.

store.dispatch({type:typeA})