Redux, 리덕스에서 사용되는 키워드, 리덕스 사용 흐름

Redux

리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리

리덕스 vs Context API

미들웨이 기능(주로 비동기 작업을 처리할 때 많이 사용)

리덕스에서 사용되는 키워드

1. Action : 상태에 어떤 변화가 필요하게 될 땐, Action을 발생.
   액션 객체는 type 필드를 필수적으로 가지고 있어야 한다.

{
	type:
}

2. Action Creater

export function addTodo(data){
	return {
    		type: "ADD_TODO",
            data
            };
}

3. Reducer : 변화를 일으키는 함수. 두 가지 파라미터
   state는 이전 상태, 이전의 상태는 절대 건드리지 않는다!

function reducer(state, action){
	// 상태 업데이트 로직
    return alteredState;
}

4. Store : 리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 된다. 스토어 안에는 현재의 앱 상태와 리듀서가 들어가있고, 추가적으로 몇 가지 내장 함수들이 있다.
5. Dispatch : Store의 내장 함수 중 하나. 액션을 발생 시키는 것

dispatch(action)

호출하면 스토어는 리듀서함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

리덕스 사용 흐름

$ npx create-react-app learn-redux
$ cd learn-redux
$ yarn add redux
$ code .

import { createStore } from 'redux';
: 스토어를 만들어주는 함수, 리액트 프로젝트에서는 단 하나의 스토어를 만든다.

리덕스에서 관리할 상태 정의
const initialState={
counter:0,
text: '',
list: []
};

액션타입 정의
액션타입은 주로 대문자로 작성
const INCREASE = 'INCREASE';

액션 생성 함수 정의
function increase(){
return{
type: INCREASE
};
}

리듀서 만들기
function reducer(store=initialState, action){
switch(action.type){
case INCREASE :
return{
...state,
counter: state.counter+1
};

스토어 만들기
const store = createStore(reducer);
스토어 안에 들어있는 상태가 바뀔 때마다 호출되는 listener 함수 만들기
const listener=()=>{
const state=store.getState();
console.log(state);
};

액션 디스패치 하기
store.dispatch(increase());