store 와 reducer

redux 를 사용하려면 먼저, 설치를 해야한다.

npm install redux

그리고, redux를 사용할 페이지에 

import { createStore } from "redux";

이렇게 import 를 해준다.

 

이제, store를 알아보자. store는 내 data를 넣는 곳이다. 내 state가 된다. (state는 내 어플리케이션에서 바뀌는 data를 뜻한다.)

const reducer = () => {

}

const store = createStore(reducer);

store라는 변수를 작성하면 위처럼 reducer를 적어달란 에러가 나오는데, reducer은 내 data를 수정(modify)하는 함수이다.

만약, reducer가 return "hello"를 하면 내 어플리케이션의 data가 될 것이다.

 

예를 들면,

const countModifier = () => {
    return "hello";
}

const countStore = createStore(countModifier);

console.log(countStore.getState())

이렇게 countModifier이란 reducer함수를 만들고, return 에 hello를 넣어주고, countStore라는 store를 만들면 hello가 담기게 된다. 그리고, getState를 써주면 hello값을 불러오게 된다.

 

위처럼 오직 store에 넣은 reducer함수만이 데이터를 변경할 수 있다. 그리고 파라미터에 count = 0을 넣어줌으로써

initialValue즉, 초깃값을 저장해줄 수 있다.

const countModifier = (count = 0) => {
    console.log(count);
    return count;
}