TIL 37 | Redux 기초

song hyun·2021년 11월 23일
0

Redux

목록 보기
1/3
post-thumbnail

📋 Redux 기초

Redux는 데이터 흐름은 단방향 흐름으로 진행된다. 모든 Redux는 4개의 단계를 따른다.

✌ store.dispatch(action)부른다.

  • action은 “무엇을 한다”는 내용을 가진 오브젝트.
  • store.dispatch(action)은 어플리케이션상의 어디에서든 부를 수 있다.

✌ store는 받은 action과 현재 가지고 있는 state를 reducer에 넘긴다.

Redux에서는 store는 반드시 하나로 해야 한다.

  • 데이터 등 로직을 분할 경우에는 store를 분할하지 말고 reducer composition을 사용해야한다.

✨Actions

action은 애플리케이션으로 부터의 정보를 store에 보내기 위한 객체이다.

const ADD_TODO = 'ADD_TODO'{  type: ADD_TODO,  text: 'Build my first Redux app'}

✨ Reducers

reducer는 action을 받아 state를 변경하기 위한 메서드이다.

✨Store

store의 역할은 아래와 같다.

  • state를 보관한다.
  • state에 엑세스를 하기 위한 getState() 제공.
  • state에 업데이트 하기 위한 dispatcj(action) 제공.
  • 리스너를 등록하기 위한 subscribe(listener)를 제공.
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)

Project

Reference

아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해 →(SITE)

profile
Front-end Developer 🌱

0개의 댓글