[TIL] REDUX... 221206

1. 모듈 초기값 만들기

todo.js

//초기값
const initialState={};

//리듀서 : 인자로 state와 action받는 함수
const reducer = (state = initialState, action){
	switch (action.type){
    	default:
        return state;
    }
};

//반드시 reducer를 export default 해야 함
export default reducer;

ex)

const initialState = {
	todos: [{id: 1, title: "react"}],
};

const reducer = (state = initialState, action) => {
	switch(action.type){
		case "ADD_TODO":	//추가하는 경우    
    		return {};
        	case "DELETE_TODO":	//삭제하는 경우
        	return{};
            
        default:	//위의 모든 case와 일치하지 않는 경우
        	reurn();
    }
};

export default reducer;

2. 모듈과 스토어 연결하기

: configStore.js에서 아래와 같이 추가

import todo from "../modules/todo";

const rootReducer = combineReducers({ todo });

//todo.js 모듈 파일의 폴더명 위와 같이 적기

3. 모듈과 스토어 연결 확인하기

- useSelector 컴포넌트에서 리덕스 스토어를 조회할 때 사용하는 react-redux의 Hook

► useSelector 사용법

// 1. store에서 꺼낸 값을 할당 할 변수를 선언합니다.
const number = 

// 2. useSelector()를 변수에 할당해줍니다.
const number = useSelector() 

// 3. useSelector의 인자에 화살표 함수를 넣어줍니다.
const number = useSelector( ()=>{} )

// 4. 화살표 함수의 인자에서 값을 꺼내 return 합니다. 
const number = useSelector((state) => {
	return state
});

ex) app.js

import React from "react";
import {useSelector} from "react-redux";

const App = () => {
	const todos = useSelector((state) => {
    	return state;
    });
    
    //console.log(state);
    
    return <div></div>
}

export default App;

• 보통 모듈은 기능의 이름을 따서 파일을 생성한다.
• 모듈의 구성요소로는 initialState, Reducer가 있다.
• 모듈을 만들면, 스토어에 연결을 해야만 한다. 그리고 연결은 configStore.js에서 한다.
• 컴포넌트에서 Store를 조회할 때는 useSelector를 사용해야 한다.
• useSelector((state)⇒state) 에서 state는 모든 모듈의 state 를 조회할 수 있는 값이다.

4. 액션 객체 만들어서 보내기

*reducer에게 내가 어떤 Action을 하길 원한다고 표현하는 것이 명령 = 객체.

리덕스 모듈에 있는 state를 변경하기 위해(추가/삭제/취소 등) 그에 맞는 액션 객체를 만들어야 함.

 

❗️액션 객체는 반드시 type이라는 key를 가져야 한다!

why? 우리가 리듀서에게 명령할 때 리듀서는 객체 안에서 type이라는 key를 보기 때문

 

- useDispatch 우리가 만든 액션 객체를 리듀서로 보내주는 react-redux의 Hook

► useDispatch 사용법

const dispatch = useDispatch(); //dispatch 생성

이렇게 dispatch라는 변수를 생성해야 함. dispatch는 함수이므로 dispatch({ type : "액션 객체" }) 이렇게 함수를 실행함

 

app.js

import React from "react";
import {useState} from "react"
import {useSelector, useDispatch} from "react-redux";	//useDispatch import하고

const App = () => {
	const dispatch = useDispatch();	//dispatch 변수 선언
    
    const [title, setTitle] = useState("");	//제목의 상태를 보여줄 state 초기값 선언
    
	const todos = useSelector((state) => {
    	return state.todos.todos;
    });
    
    const handlerAddBtn = () => {
    	dispatch({				//dispatch() 함수가 실행되면
        	type: "ADD_TODO",
                todo: {
                    id: new Date(),
                    title,
                },
        });				//()안의 액션객체가 reducer로 전달되는 것
    };

    return (
        <div>
        	<input
            	type="text"
                value={title}
                onChange={(e) => {
                	setTitle(e.target.value);
                }}
            />
            <button onClick={handlerAddBtn}>버튼</button>
        </div>
    )
}

export default App;

"ADD_TODO"라는 type 즉 key를 가지고 있는데 (버튼 클릭 시 만들어지는 todo 데이터의) id와 title 정보와 함께 reducer로 전달됨

5.  리듀서에서 액션 객체 받기

app.js 에서 dispatch가 보낸 아래의 정보를 todo.js에서 reducer가 어떻게 받아야 할까?

{type: "ADD_TODO",
todo: {
id: new Date(),
title,}

reducer 안의 switch문에서 action.type을 조회하는데 case가  "ADD_TODO"와 일치하는 경우 return 절이 실행되고,

이를 통해 새로운 state를 반환함!

 

• 액션객체란, 반드시 type이란 key를 가져야 하는 객체이다. 또한 리듀서로 보낼 “명령"이다.
• 디스패치란, 액션객체를 리듀서로 보내는 “전달자” 함수.
• 리듀서란 디스패치를 통해 전달받은 액션객체를 검사하고 조건이 일치했을 때 새로운 상태값을 만들어내는 “변화를 만들어내는" 함수.
• 디스패치(dispatch)를 사용하기위해서는 useDispatch() 라는 훅을 이용해야 한다.
  • store 의 내장함수 중 하나
  • action을 발생 시키는 것
  • dispatch 함수에 action 을 파라미터로 전달함 like this - dispatch(action) 
• 액션객체 type의 value는 대문자로 작성한다. (JS에서 상수는 대문자로 작성하는 룰이 있음)

6. 액션 크리에이터 만들기

*액션객체의 value "ADD_TODO" 를 바꿔야 한다면?!

Action Creator : Action을 만드는 생성자.

액션 객체를 한 곳에서 관리할 수 있도록 액션 객체를 반환하는 함수를 만드는 것임.

액션객체의 value는 상수로 생성함.

→ Action creater는 태생적으로 모듈 파일 밖에서 사용될 함수이므로 앞에 export 붙임!

 

ex) 이렇게 받은 정보를

const addTodo = () => {
	return {
    	type: "ADD_TODO",	//"ADD_TODo" 이렇게 오타 생길 수 있음
        todo: {
        	id: new Date(),
            	title,
        }
    };
};

//Action creater 로 만들면 자동 완성 기능이 제공됨(오타 발생 가능성 낮아짐)

action creater로 만들기

const ADD_TODO = "ADD_TODO";

const addTodo = (todo) => {
	return {
    	type: ADD_TODO,
        todo,
    };
};

 

+ todo 삭제도 위와 같이 만들면 됨

const ADD_TODO = "ADD_TODO";
const DELTE_TODO = "DELTE_TODO";

const addTodo = (todo) => {
	return {
    	type: ADD_TODO,
        todo,
    };
};

const deleteTodo = (todo) => {
	return {
    	type: DELTE_TODO,
        todo,
    };
};

 

app.js

dispatch()안의 액션 객체를 import한 Action creator로 바꾸기 

const handlerAddBtn = () => {
    	dispatch(addTodo({id: new Date(), title}));
}

return(
	<div>
    	{todos.map((todo) => (
        	<div key={todo.id}>{todo.title}></div>
()}

+ todo 삭제 btn

const handlerDeleteBtn = () => {
	dispatch(deleteTodo(id));
};

return(
	<div key={todo.id}>
    	<div>{todo.title}</div>
        <button onClick={handlerDeleteBtn}>삭제</button>
    </div>
))}

 

👊🏻 오늘 한 일

• React-redux 개인 프로젝트

😲 오늘 느낀 점

redux 너무 어렵다

👏🏻 오늘의 칭찬

잘 모르겠다.

🤔 오늘 아쉬운 점

나의 이해력?..

⛵️ 내일 할 일

• React-redux 개인 프로젝트