나만을 위한 Redux 정리

Store

import { createStore } from 'redux'

저장할 매체인 Store을 호출한다.
데이터들이 여기에 담겨서 저장하고 관리한다.

const store = createStore();

createStore을 사용하기 위해서는 reducer 라는 친구가 필요하다.

const reducer = () => { }

reducer는 함수형태이기만 하면 된다.

대충 정리해보자면

import { createStore } from 'redux'

const reducer = () => { };
const store = createStore(reducer);

이런 식으로 createStore 안에 reducer를 넣어준다.

오직 데이터는 reducer에서만 조작이 된다.

Reducer

reducer를 선언하였으면 안에 파라미터 값을 넣을 수 있다.
(state, action)

state를 선언하고 action을 통해서 그 값의 변화를 줄 수 있다.
변화는 dispatch의 개념이 필요하다.

store.dispatch({type: "add"})

dispatch 는 object 형태여야한다.
type이든 뭐든 정해주고 넘기면 reducer에서

const reducer = (state = 0, action) => {
  if(action.type === "add") {
  count = count + 1;
  }
 };

이런식으로 사용해줄 수 있다.
action의 값으로 데이터를 조작할 수 있다.

그 변화를 감지하는 것이 subscribe 이다.
react에서 useEffect와 비슷한 개념인 것 같다.

이 친구는 reducer가 아닌 store에서 감지한다.

const onchange = () => {
   number.innerText = store.getState();
 }
 
store.subscribe(onchange);

subscribe를 통해 변화를 감지하고 조작할 친구를 괄호 안에 넣어주면 된다.

store.getState() 는 관리하고 있는 state 값을 불러올 수 있는 역할인 친구이다.