27. Redux

Redux

State Manager

• Without
  each component has its own storage => spaghetti code
• With
  has one store without having each storage

• predictable state container for JavaScript applications
  • unpredictable; random bugs, hard to fix
• application-wide state
• reduce function

react component = view

Reducer

• can have multiple reducers
• receives a state and do an action

• reduce function
• specify how the application’s state changes in response
• pure function
• never do something like : mutate arguments, callign an API, call non-pure function

identity reducer

• getState()
• dispatch(action)
• subscribe(listener)

👇but normally uses hooks👇

Hooks

※ for React
react-query.tanstack.com/reference/useQuery
useQuery
Subscribe to our newsletter The latest TanStack news, articles, and resources, sent to your inbox.
react-query.tanstack.com
useReducer
ko.reactjs.org/docs/hooks-reference.html
Hooks API Reference – React
A JavaScript library for building user interfaces
ko.reactjs.org

Making To-Do List

🚀 redux devTools

Do one thing -> make sure it is working -> move on to next one

overview Tree

big loop

• dispatch: sends the action to the reducer => actions in loop

index.js

👇simplified

• < TodoItem todo = {todo} onChange={onChangeTodo} >

※ Single component as a single responsibility

• Presentational Component
  blog.naver.com/backsajang420/221368885149
  [React] Presentational and Container Components
  [React] 프레젠테이션 컴포넌트와 컨테이너 컴포넌트 (Presentational and Container Components)# 시…
  blog.naver.com

프레젠테이션 컴포넌트 (Presentational Component)
프레젠테이션 컴포넌트(Presentational Component) 는 아래와 같은 성질을 갖는다.
● 어떻게 보여지는 지를 책임진다.
컨테이너 컴포넌트 (Container Component)
컨테이너 컴포넌트(Container Component) 는 아래와 같은 성질을 갖는다.
● 어떻게 동작해야 할지를 책임진다.

React with Redux