Redux [Basic] - createStore

01.Store를 만드는 함수 createStore()

예시

const store = createStore(리듀서);

실습

• 파일 생성
  

• action.js

// 1.액션의 타입을 정의하여 변수로 빼는 단계
const ADD_TODO = "ADD_TODO";

// 2.액션 객체를 만들어 내는 함수를 만드는 단계
function addTodo(todo) {
  return {
    type: ADD_TODO, // 액션의 타입 지정
    todo, // 액션이 할일 지정 (payload)
  }
}

• reducers.js

import { ADD_TODO } from "./actions"

export function todoApp(previousState, action) {
  // 초기값을 설정해주는 단계
  if (previousState === undefined) {
    return []
  }

  if (action.type === ADD_TODO) {
    return [...previousState, action.todo]
  }

  return previousState
}

• 현재 State의 초기값이 undefined이므로 reducers.js에서 빈 배열[]을 리턴

• store.js

import { createStore } from "redux"
import { todoApp } from "./reducers"

const sotre = createStore(todoApp)

export default sotre

• createStore함수로 sotre 생성

• index.js

import React from "react"
import ReactDOM from "react-dom/client"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import sotre from "./redux/sotre"

console.log(sotre)
console.log(sotre.getState())

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

reportWebVitals()

• import 키워드로 store 가져오기

• sotre 객체와 sotre의 현재 state값을 콘솔에 출력

• 실행 결과
  

• sotre의 현재 state 값으로 reducers.js에서 설정한 빈 배열[]이 출력됨

02.현재의 State값을 변경 sotre.dispatch

• action.js

// 1.액션의 타입을 정의하여 변수로 빼는 단계
const ADD_TODO = "ADD_TODO";

// 2.액션 객체를 만들어 내는 함수를 만드는 단계
function addTodo(todo) {
  return {
    type: ADD_TODO, // 액션의 타입 지정
    todo, // 액션이 할일 지정 (payload)
  }
}

• addTodo 함수를 export 키워드로 내보내기

• index.js

import React from "react"
import ReactDOM from "react-dom/client"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import sotre from "./redux/sotre"
import { addTodo } from "./redux/actions"

console.log(sotre)
console.log(sotre.getState())
sotre.dispatch(addTodo("coding"))
console.log(sotre.getState())

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

reportWebVitals()

• import키워드로 addTodo 함수 가져오기
• sotre.dispatch를 이용하여 addTodo 함수에서 state값으로 문자열 codeing을 추가
• 기존의 state 값과 변경된 state 상태값을 콘솔창에 출력하여 비교 합니다.

실행 결과

• 기존의 state값: 빈 배열[]
• 변경된 state값: ['coding']

03.State값이 변경될 때 마다 callback함수 실행 & 상태변경 기록

const unsubscribe = sotre.subscribe(() => {})

index.js

import React from "react"
import ReactDOM from "react-dom/client"
import "./index.css"
import App from "./App"
import reportWebVitals from "./reportWebVitals"
import sotre from "./redux/sotre"
import { addTodo } from "./redux/actions"

// 상태가 바뀔때마다 기록합니다.
const unsubscribe = sotre.subscribe(() => {
  // sotre의 변경사항을 구독 => 즉, dispatch가 발생할때 마다 함수가 실행됨
  console.log(sotre.getState())
})

// 액션을 보냅니다.
sotre.dispatch(addTodo("coding"))
sotre.dispatch(addTodo("read book"))
sotre.dispatch(addTodo("eat"))

// 상태 변경을 더 이상 받아보지 않습니다.
unsubscribe()
sotre.dispatch(addTodo("end"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

reportWebVitals()

실행 결과

• unsubscribe()이전의 액션은 모두 출력되지만 unsubscribe()이후의 액션은 출력되지 않습니다.

04.store 기능 정리

ActionCreator (액션 생성자)

// 1.액션의 타입을 정의하여 변수로 빼는 단계
const ADD_TODO = "ADD_TODO";

// 2.액션 객체를 만들어 내는 함수를 만드는 단계
function addTodo(todo) {
  return {
    type: ADD_TODO, // 액션의 타입 지정
    todo, // 액션이 할일 지정 (payload)
  }
}

• 액션을 생성하기 위한 함수

createSotre(reducer) (Store 생성)

import { createStore } from "redux"
import { todoApp } from "./reducers"

const sotre = createStore(todoApp)

export default sotre

• store를 생성할 때 사용
• 매개변수로 reducer를 전달
• createSotre에는 4개의 메소드가 들어있다.(getState, dispatch, subscribe, replaceReducer)

• store.getState()

console.log(sotre.getState())

• getState()는 현재의 state의 값을 가져옴

store.dispath(액션) || store.dispath(액션생성자())

import sotre from "./redux/sotre"

sotre.dispatch(addTodo("coding"))
sotre.dispatch(addTodo("read book"))
sotre.dispatch(addTodo("eat"))

• dispath()는 인자값으로 액션을 받아 state의 값을 변경 해줌

const unsubscribe = sotre.subscribs(() => { })

const unsubscribe = sotre.subscribe(() => {
  // sotre의 변경사항을 구독 => 즉, dispatch가 발생할때 마다 함수가 실행됨
  console.log(sotre.getState())
})

sotre.dispatch(addTodo("coding"))
sotre.dispatch(addTodo("read book"))
sotre.dispatch(addTodo("eat"))
unsubscribe()

• subscribs(() => { })는 store의 state값이 변경이 생겼을때 화살표(callback) 함수를 실행
• subscribs(() => { })함수의 리턴되는 결과물이 unsubscribe
• unsubscribe();하면 subscribs()가 제거됨

store.replaceReducer(다른리듀서)

• replaceReducer()는 원래가지고 있던 리듀서를 다른 리듀서로 변경 해줌