Redux(리덕스)란?

Redux(리덕스)란 JavaScript(자바스트립트) 상태관리 라이브러리.

여기서 상태란 state를 의미

Redux의 구조

action

---

Action이란 데이터를 변경하는 행위로서 Dispatcher에게 전달되는 객체를 말합니다.
Action creator 메서드는 새로 발생한 Action의 타입(type)과 새로운 데이터(payload)를 묶어 Dispatcher에게 전달합니다.

const 함수명 =()=>{ //함수를 써서 만드는것을 액션생성자
return{ //리턴안에 있는걸 액션
type: 어떤값,
payload:{
 어떤값
 	}
}

Dispatcher

---

디스패치는 스토어의 내장함수 중 하나이고,Action을 전달하는 메서드입니다. Reducer를 호출해 state의 값을 바꾸는 역할을 합니다.

Reducer

---

Reducer는 현재의 state와 Action을 이용해서 새로운 state를 만들어 내는 순수함수입니다.
dispatch로 전달된 action.type에 따라 실행할 코드를 작성하면
이전state에서 변경된 state를 확인하여
새로운 state를 반환해줍니다

const rootReducer = (state,action){
  switch(action.type){
    case TEST
      return state+1
    dafult:
     return state
  }
}

Store

---

state가 관리되는 오직 하나뿐인 저장소의 역할을 합니다.state가 저장되어있는 공간

{ createStore } from "redux"
const store = createStore(rootReducer);
가 필요하다

provider

---

React 에서 Redux 를 사용할때 Store 를 연결할 수 있도록 도와줍니다.

<Provider store ={store}>
<App />
</Provider>

Reducer의 Immutability(불변성)
그
위의 itemReducer 예제 코드에서 Object.assign을 통해 새로운 객체를 만들어 리턴하는 것을 통해 힌트를 얻을 수 있습니다.

useSelector()

---

useSelector()는 컴포넌트와 state를 연결하는 역할을 합니다.
useSelector 의 전달인자로는 콜백 함수를 받으며 콜백 함수의 전달인자로는 state 값이 들어갑니다

const state = useSelector(state => state);

useDispatch()

---

useDispatch() 는 Action 객체를 Reducer로 전달해 주는 메서드입니다.

const dispatch = useDispatch();

Flux 패턴이란

---

Flux는 사용자 입력을 기반으로 Action을 만들고 Action을 Dispatcher에 전달하여 Store(Model)의 데이터를 변경한 뒤 View에 반영하는 단방향의 흐름으로 애플리케이션을 만드는 아키텍처입니다.

//밑에는 디자인패턴이고 흔히 우리가쓸때는 action->dispatch->reducer->store로 흐르는 단방향흐름이라고 기억하면 될것같다