createStore

createStore란?

• state는 어플리케이션에서 값이 바뀌는 data를 의미한다.
• store는 data를 넣는 곳을 의미한다.
• reducer는 data의 변경을 담당하는 함수를 의미한다.

사용방법

1. index.js에서 import {createStore} from “redux”;를 통해서 import한다.
2. const store = createStore();라고 작성한다.
3. createStore를 위해서 reducer라는 임의의 내용을 가진 빈 함수를 만든다.
4. (2)에서 작성한 createStore()의 인자로 (3)에서 작성한 reducer 함수를 집어 넣는다.

   //예시
   const reducer = (value, action) => {};
   const store = createStore(reducer);

5. store에게 action을 보내기 위해 store.dispatch({type : “Hello”});와 같은 문장을 작성한다.
6. 값이 변경됬을 때의 기능을 만든다. (예시 : onChange)
7. store.subscribe(onChange);를 작성해서 store가 작동되서 값이 변경되면 onChange가 작동되도록 한다.

값 전달하기

• reducer 함수 기본틀
  • const reducer = (value, action) => {};
• value는 reducer 함수가 전해받는 값들을 의미한다.
• action은 reducer 함수가 전해받는 행동을 의미한다.
• action은 순수한 object이여야 하기 때문에 {}를 통해서 전달한다.

현재 값 알아내기

• getState()

const reducer = (value, action) => {};
const store = createStore(reducer);
store.getState();

값의 변화 감지하기

• dispatch가 실행됬을 때 작동할 기능
• subscribe()

const reducer = (value, action) => {};
const store = createStore(reducer);
const onChange = () => {
    temp.innerText = store.getState();
};
store.subscribe(onChange);

store.dispatch({type : "Hello"}); //onChange 작동