[TIL] 04.07 Redux

오늘도 유지 보수 작업을 진행하였다. 어제에 이어서 버튼과 헤더 작업을 진행 하였고 거의 마무리를 하였다. 

내일 테스트를 해보고 버튼 헤더 작업은 우선 끝낼 생각이다. 

 

회원 탈퇴 부분에서 소셜 로그인 탈퇴가 구현돼 있지 않아 소셜 로그인인 경우 회원 탈퇴버튼을 보이지 않도록 만들어주어야 했다. 

해당 부분이 Redux를 사용하고 있어서 간단하게 Redux에 대해서 공부를 해보았다. 

 

Redux

리덕스는 state 상태 관리 라이브러리이다. 글로벌한 state를 사용하여 보다 쉽게 state 관리가 가능하도록 만들어 준다. 

 

1.Action

state의 값에 변화를 줄때 액션을 사용한다. 하나의 객체로 표현이 된다.

{ 
    type: Action,
    name: ockkk,
    learning: redux    
}
    

tpye은 꼭 포함되어 있어야 하고 나머지 값들은 어떤 값이 들어가든 상관 없다. 

 

2.액션 생성함수 

액션을 만드는 함수이다. 파라미터를 받아와 액션 객체의 형태로 만들어 준다. 

function addData(data) {
	return {
		type: "ADD_DATA",
        data
    };
}

 

3.Reducer

변화를 일으키는 함수로 state, action 두가지 파라미터를 받아온다.

현재의 상태와 전달받은 액션을 비교하여 새로운 상태를 만들어서 반환한다. 

function reducer(state, action) {
	return NewState
}

4.Store

한 어플리케이션 당 하나의 스토어를 만든다. 스터어에는 현재 앱 상태와 리듀서가 들어가고 몇가지 내장 함수도 포함돼 있다. 

 

5.subscrube

스토어의 내장함수로 함수 형태의 값을 파라미터로 받아온다. 특정 함수를 전달해주면 액션이 dispatch 돼었을 때 마다 전달해준 함수가 호출된다.  

 

리덕스 사용 예제 : 리액트 없이 쓰는 리덕스, 리덕스를 리액트와 함께 사용하기