Redux

• 리덕스란 무엇인가?
  • 전역 데이터 저장소 라고 보면 된다.
  • 저장소에 저장되어 있는 state는 어느 컴포넌트 소속의 데이터가 아니라서 어느 컴포넌트나 자유롭게 이용이 가능하다.
• 전역 상태관리가 필요한 이유
  1. 형제관계에서는 데이터를 주고받을 수 없다.
  2. 피치못할 사정으로 자식컴포넌트에서 부모 컴포넌트로 데이터를 넘겨줘야 할때 이 상황을 피할 수 있도록해준다.
  3. 자식 컴포넌트 사슬구조가 100개정도 되는데 최하위 컴포넌트에서만 부모컴포넌트의 데이터를 필요로 할 때 해당 컴포넌트에만 데이터를 넘겨줄 수 있다.

1. 전역상태관리 흐름을 볼 때 생각해야 할 것

1. 전역으로 누구나 볼 수 있는 데이터가 저장된 곳
2. 그 데이터를 구독(참조)하는 애
3. 구독한 데이터를 수정하려고 하는 애
4. 바뀐 데이터를 모두가 볼 수 있도록 알려주는 애

2. 리덕스에서의 데이터 흐름

1. 전역으로 누구나 볼 수 있도록 스토어에 데이터가 저장되어있다.
2. 주황 컴포넌트와 초록 컴포넌트가 스토어의 데이터를 구독한다.
3. 초록 컴포넌트가 스토어의 데이터를 수정하려고 액션을 디스패치한다.
   • 액션을 디스패치한다 : 데이터를 수정하는 함수를 호출하는 리듀스에 뭘 바꿀건지 알려준다.
4. 리듀서에서 데이터 수정함수를 실행하고, 스토어에 저장 후 스토어가 두 컴포넌트에게 자신의 데이터가 바뀌었음을 알린다.
5. 데이터를 구독한 컴포넌트가 리렌더링되면서 새로운 데이터를 보여준다.

3. 리덕스의 개념과 용어

1. State : 저장하고 있는 상태값. 데이터라고 봐도 무방하다.
2. Action : 상태변화가 필요할때 발생
   (어떤 타입의 데이터를 어떻게 바꾸고 싶은지 알려준다.)
3. ActionCreator : 액션 함수를 생성한다
   • 액션을 리턴해주는 함수

   const changeState = () => {
      return {type : 'change_state',
              data : new data}
          }
    // type : 바꿔줄 데이터 타입, data : 어떻게 바꿀건지

4. Reducer : 데이터 수정을 실질적으로 담당하는 곳
   - 액션이 디스패치 되면, 리듀서가 함수를 자동으로 실행한다.
   (액션에 맞게 데잍터를 변환)

   // 초기값(initialState)을 준다 _ 초기값 형태는 딕셔너리로 해주는게 편함
        const initialState = { name: 'mean0' }
   // 파라미터에 "=" 이 들어가지? => 파라미터값이 undefined일때 일어나는 오류를 초기값을 설정해줘서 방지한다.
         function reducer(state = initialState, action) {
   		      switch(action.type){
   			    // action의 타입마다 케이스문을 걸어주면, 
   			    // 액션에 따라서 새로운 값을 돌려준다.(바뀐 상태값 = 리턴값)
   			    case CHANGE_STATE: 
   			  	return {name: 'mean1'};
   		    	default: 
   			  	return false;
   		      }	
       }

5. store : Reducer들을 한군데 묶어서 데이터를 저장해두는 곳
6. dispatch : Action을 리듀스에 요청해주는 스토어의 내장함수
   (dispatch(Action) 이렇게 사용한다.)

4. 리덕스의 특징

• 단일 스토어를 사용한다.(리듀서는 여러개 있을 수 있다.)
• 스토어의 스테이트는 오직 액션으로만 바꿀 수 있다.
• 어떤 요청이 와도 리듀서는 같은 동작을 해야 한다.

5. 리덕스 사용해보기

1. 리덕스를 사용할 프로젝트의 src에 redux/module 폴더를 생성한다.
2. 리덕스 폴더 아래에 Reducer.js파일(모듈)을 만든다.(폴더이름은 맘대로)

//action 타입을 알려주는 상수, CREATE = 생성
const CREATE = 'buket/CREATE';
// initialState -> 초기값을 설정해줄 수 있다.
	const initialState = {
    		list : ["영화관 가기","매일 책읽기","수영하기"]
			}
-------------------------------->
// Action Creators(액션 생성 함수)
	export function createBuket(buket){
    		return { type:CREATE, buket:buket};
      		// {type : 어떤 타입의 액션인지 알려준다 , 추가 할 값(새롭게 변환할 데이터)}
}
--------------------------------->
// Reducer(액션을 실행할 함수)
// 파라미터에 값이 안들어와서 나는 오류를 방지하기 위해 기본값을 설정해 준것이다.
	export default function reducer(state = initialState, action = {}) {
    		switch (action.type) {
        	// case -> 액션 타입이 뭐야?
       		case "buket/CREATE" : {
                // 내가 추가할 새로운 리스트들의 배열(action.buket) + 기존에 있었던 리스트들
            const new_buket_list = [...state.list, action.buket ];
             // 리턴값에는 변화된 데이터를 넣어줄거임
            	return{
                	list : new_buket_list
            		};
        }
    // do reducer stuff
    default: return state;
    	}
    }

3. 스토어 파일을 만들어 리듀서들을 묶어준다.

// 스토어 만들기(한 프로젝트당 단한개의 스토어가 생성된다.)
// combineReducers : 리듀서들을 묶고 필요한 옵션들까지 한데 모아 묶어서 스토어를 만드는데, 이때 리듀서들을 묶는 역할을한다.
	import {createStore, combineReducers} from "redux";
	import buket from "./modules/buket";
---------------------------------------------------->
// 여러개의 리듀서를 한곳에 묶어버리기
// combineReducers({리듀서1},{리듀서2},{리듀서3}...)
// 스토어 만들기(원래 필요한 옵션들이 있으면 옵션도 한데 모아서 같이 만들어줌)
	const rootReducer = combineReducers({buket})
	const store = createStore(rootReducer);
export default store;

6. 리덕스 컴포넌트에 연결하기

1. index.js에서 import {Provider} from "react-redux" 임포트해주기.
2. 넘겨줄 스토어 임포트해주기(만들어둔 스토어 파일 임포트)
3. < Provider store={새롭게 추가될 데이터 이름}> 적용해주기

• 리듀서를 뭉쳐둔 것들 = 루트 리듀서
• 루트 리듀서+옵션들 = 스토어

7.리덕스 컴포넌트에서 사용해보기

1. 데이터 가지고 오기

• 리덕스의 데이터를 사용할 컴포넌트에 import {useSelector} from "react-redux"를 임포트해준다.
• 초기값 설정을 리덕스 안의 데이터로 해준다.(리덕스 훅을 이용)
  • const my_lists = useSelector((state)=> state.buket.list);
  • 파라미터의 state는 스토어 안에있는 모든 데이터를 말한다.

2. 데이터 수정하기

• 데이터 수정이 필요한 컴포넌트에 import {useDispatch} from "react-redux" 를 임포트 해준다.
• 액션이 일어날 이벤트 함수에(onClick) 데이터 수정을 위한 액션함수를 만들어준다.
• const dispatch = useDispatch(); 로 리덕스 훅을 이용해 액션함수 생성
• 액션 생성함수(createBuket)를 이미 리듀서에 넣어뒀다면 끌어와서 쓰면된다.
• import {createBuket} from "./redux/modules/buket"로 함수 끌어오기-> 액션 생성 함수사용을 위함
  • 이벤트 함수 = ()=>{
    dispatch(createBuket(수정되길 원하는 데이터))
    }