Redux란

리덕스는 자바스크립트 앱을위한 예측가능한 상태 컨테이너이다.

리덕스를 배우기전에 리액트에서는 부모 컴포넌트인 App에서 모든것을 관리하고 데이터를 아래로 내려주는 구조였다.

리액트는 순방향이라 직관적이고, 데이터를 App 한곳에서 관리하여 편하지만 앱의 규모가 엄청나게 커져버린다면 중간중간에 있는 컴포넌트들은 그저 전달해주는 역할로써 아래로 쭈욱 내려갔다가 다시 위로 쭈욱 올려보내줘야하므로 하는일도 많아지고 비효율적으로도 보인다.

이에 대한 해결책으로, 리덕스라는걸 쓰게되는데 리덕스는 글로벌 store를 만들어서 다른 모든 컴포넌트로 state를 공급하게 만들어준다. 리액트만 사용하였을때보다 상태관리가 훨씬 더 효율적으로 되는거라고 본다.
위에서 말한것처럼 리액트는 컴포넌트들을 따라서 하나하나 전달해주었지만, 리덕스를 사용하게 되면 store가 있어서 바로바로 컴포넌트들이 상태값을 받을 수가 있게된다.

정리하자면...

전역으로 데이터를 관리하는곳이 바로 Store
내부에 Action에 따라서 데이터 값을 변화시켜주는 함수는 Reducer라고 부른다.

Redux 3가지 원칙

1. redux는 한 곳에서 데이터를 전역으로 관리하고, 이곳을 Store라고 부른다.
2. state는 읽기 전용이다
   리액트에서도 그러했듯이 리덕스도 불변성을 유지하면서 상태를 변경해줘야한다. 우리가 이전 상태값에 새로운 배열값을 추가할때 push를 사용하지않고, concat을 사용한 이유 이런것들이 불변성 유지와 관련된 내용이다.
3. action값에 따라 데이터 값이 변한다했는데 이때 함수는 순수함수여야한다. 동일한 입력값이 있다면 동일한 출려값이 있어야한다.

Redux의 장점

1. 상태 예측가능
2. 유지보수 용이
3. 디버깅에 유리함(action과 state log 기록 시)
4. 테스트를 붙이기 쉽다.

Redux에서 사용되는 keyword

1. Action
2. Action Creator
3. Reducer
4. Store
5. dispatch

1. Action

상태에 어떤 변화가 필요할때 액션을 발생시킨다.
표현은 객체로 표현이된다.
액션 객체는 type값을 필수적으로 가지고 있어야한다.
그 외에도 값을 넣어주고싶으면 개발자 마음대로 넣는게 가능!

{
type: "value",
(...개발자 마음대로)
}

2. Action Creator

액션 생성함수는 말그대로 액션을 만드는 함수.
(리덕스 사용시 필수적인건 아니다.)

3. Reducer

리듀서는 변화를 일으키는 함수이다.

function reducer(state, action) {
	// 변화될 상태값들..
	return state
}

4. Store

리덕스에서는 애플리케이션 하나당 한개의 스토어를 만든다.
store 내부에는 현재의 앱상태, 리듀서, 몇가지 내장 함수들이 있다.

5.dispatch

store의 내장함수 중 하나이며, 액션을 발생시키는 것 이라고 이해하면 된다. 이 함수에는 인자로 action값을 전달한다.