Redux 공부!

조영민·2022년 3월 29일

반복숙달로 익숙해진 다음에 이해하기!!

서버가 없다면 기본적으로 리덕스는 데이터를 나의 로컬store에서만 관리한다.

1. Store 만들기

src -> redux 폴더안에 configStore.js 만들고,
createStore, combineReducers 임포트하고,
리덕스파일 임포트(여러개면 각각 다 임포트)

const rootReducer = combineReducers({리듀서}, {리듀서}, ....)
const store = createStore(rootReducer);
export default store;

2. redux와 component 연결

index.js에 {Provider}와 store 임포트.
전체를 Provider로 감싸주기.

리덕스 세팅

1. action타입 정해주기

const LOAD = "bucket/LOAD";
const CREATE = "bucket/CREATE"   ( UPDATE, REMOVE 등 )

2. 초기값 설정

const initialState = {
	list: [];    <- 처음에는 데이터 넣주고 확인하기!!
}

3. action을 생성할 함수만들기 (액션과 데이터 리턴해줌)

export const loadBucket = (받아올 파라미터) => {
	return { type: LOAD, 받아온 파라미터 }
}

4. reducer 만들기 (실제로 데이터변경)

export default function reducer(state: initialState, action={}) {
	switch (action.type) {
    	case "bucket/LOAD": {
        	return state;
        }
        case "bucket/CREATE": {
        	const new_bucket = [...state.list, action.bucket];
        	return {list: new_bucket}
        }
    }
}

다음 그림으로 데이터가 각각 어디서 받아오고 무엇을 의미하고, 어떤흐름인지 이해하자!!

Component에서 Redux 데이터 사용하기!

ex)
const my_list = useSelector((state) => state.bucket.list));

// state(store의전체데이터)중에 bucket에서 list 가져올거야



ex)
const addBucketList = () => {
	dispatch(createBucket(text.current.value));
}

// createBucket()은 액션을 생성하는 함수!!
// 그안에 인자로 (text -> useRef()로 잡아온 input)의
// current (항상들어가는듯?)의 value 값  !!!쉽게말해 input의 value!!!
// input의 value값을 인자로 넣어서 주겠다!

생성, 추가, 업데이트 등은 내가 어떤 행동(버튼을 누른다던가)을 했을때
실행되니까 그때 실행함수로(ex. onclick안의 함수)넣어주면
액션생성함수(createBucket())의 매개변수로 인자값이 들어가서 액션을 생성한다!!
{type: CREATE, bucket}의 형태로.
여기서 bucket은 bucket: bucket을 줄인것. 이 bucket에 인자로넘겨준 값을
파라미터로 받아서 들어감.
즉, bucket === text.current.value.
그다음에 action의 case에 맞게 reducer가 실행되어서 데이터를 return으로
데이터를 수정해줌!
return 해줄때는 initialState와 같은형태 {list: []}로 해야함.

다음 그림으로 데이터가 각각 어디서 받아오고 무엇을 의미하고, 어떤흐름인지 이해하자!!