[리액트] 리덕스

• (1) 리덕스 Store를 Component에 연결한다.
• (2) Component에서 상태 변화가 필요할 때 Action을 부른다.
• (3) Reducer를 통해서 새로운 상태 값을 만들고,
• (4) 새 상태값을 Store에 저장한다.
• (5) Component는 새로운 상태값을 받아온다. (props를 통해 받아오니까, 다시 랜더링 되겠죠?)

👉 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친구입니다.
아래 용어들은 리덕스의 기본 용어인데, 여러분이 키워드 삼기 좋은 용어들이에요. 앞으로 자주 볼 단어들이니 미리 친해집시다!

• (1) State

  👉 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요.
  딕셔너리 형태({[key]: value})형태로 보관합니다.

• (2) Action

  👉 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것입니다.

    // 액션은 객체예요. 이런 식으로 쓰여요. type은 이름같은 거예요! 저희가 정하는 임의의 문자열을 넣습니다.
    {type: 'CHANGE_STATE', data: {...}}

• (3) ActionCreator
  

👉 액션 생성 함수라고도 부릅니다. 액션을 만들기 위해 사용합니다.

    //이름 그대로 함수예요!
    const changeState = (new_data) => {
    // 액션을 리턴합니다! (액션 생성 함수니까요. 제가 너무 당연한 이야기를 했나요? :))
    	return {
    		type: 'CHANGE_STATE',
    		data: new_data
    	}
    }

• (4) Reducer
  

👉 리덕스에 저장된 상태(=데이터)를 변경하는 함수입니다.
우리가 액션 생성 함수를 부르고 → 액션을 만들면 → 리듀서가 현재 상태(=데이터)와 액션 객체를 받아서 → 새로운 데이터를 만들고 → 리턴해줍니다.

    // 기본 상태값을 임의로 정해줬어요.
    const initialState = {
    	name: 'mean0'
    }
    
    function reducer(state = initialState, action) {
    	switch(action.type){
    
    		// action의 타입마다 케이스문을 걸어주면, 
    		// 액션에 따라서 새로운 값을 돌려줍니다!
    		case CHANGE_STATE: 
    			return {name: 'mean1'};
    
    		default: 
    			return false;
    	}	
    }

• (5) Store
  

👉 우리 프로젝트에 리덕스를 적용하기 위해 만드는 거예요!
스토어에는 리듀서, 현재 애플리케이션 상태, 리덕스에서 값을 가져오고 액션을 호출하기 위한 몇 가지 내장 함수가 포함되어 있습니다.
생김새는 딕셔너리 혹은 json처럼 생겼어요.

• (6) dispatch
  

👉 디스패치는 우리가 앞으로 정말 많이 쓸 스토어의 내장 함수예요!
액션을 발생 시키는 역할을 합니다.

• 리덕스의 3가지 특징
  

👉 눈으로 쭉 읽어보세요! 당장 이해하지 못해도 괜찮아요. 프로젝트를 끝낼 쯤엔 이게 그런 소리였구나 하실겁니다. 😎



- (1) store는 1개만 쓴다!
    

    👉 리덕스는 단일 스토어 규칙을 따릅니다. 한 프로젝트에 스토어는 하나만 씁니다.
    

    
- (2) store의 state(데이터)는 오직 action으로만 변경할 수 있다!
    

    👉 리액트에서도 state는 setState()나, useState() 훅을 써서만 변경 가능했죠! 
    데이터가 마구잡이로 변하지 않도록 **불변성**을 유지해주기 위함입니다.
    불변성 뭐냐구요? 간단해요! 허락없이 데이터가 바뀌면 안된단 소리입니다!
    
    조금 더 그럴 듯하게 말하면, 리덕스에 저장된 데이터 = 상태 = state는 **읽기 전용**입니다.
    
    **그런데... 액션으로 변경을 일으킨다면서요? 리듀서에서 변한다고 했잖아요?**
    → 네, 그것도 맞아요. 조금 더 정확히 해볼까요!
    가지고 있던 값을 수정하지 않고, 새로운 값을 만들어서 상태를 갈아끼웁니다!
    즉, A에 +1을 할 때, 
    A = A+1이 되는 게 아니고, A' = A+1이라고 새로운 값을 만들고  A를 A'로 바꾸죠.
    

    
- (3) 어떤 요청이 와도 리듀서는 같은 동작을 해야한다!
    

    👉 **리듀서는 순수한 함수여야 한다**는 말입니다.
    순수한 함수라는 건, 
    - 파라미터 외의 값에 의존하지 않아야하고,
    - 이전 상태는 수정하지(=건드리지) 않는다. (변화를 준 새로운 객체를 return 해야합니다.)
    - 파라미터가 같으면, 항상 같은 값을 반환
    - 리듀서는 이전 상태와 액션을 파라미터로 받는다.