Redux

리덕스 모듈스 

import { v4 as uuidv4 } from "uuid";

액션아이템을 만들어 준다 

휴먼에러를 방지라기 위해 상수 처리하여서 액션을 만들어준다

const ADD_TODO = "ADD_TODO";

const REMOVE_TODO = "REMOVE_TODO";

const SWITCH_TODO = "SWITCH_TODO";

export const addTodo = (payload) => {

return {

type: ADD_TODO,

payload,

};

};

export const removeTodo = (payload) => {

return {

type: REMOVE_TODO,

payload,

};

};

export const switchTodo = (payload) => {

return {

type: SWITCH_TODO,

payload,

};

};

 

엑션 크리에이트를 만들어준다!

 

 

초기값을 설정해준다!

 

const initialState = [

{

id: uuidv4(),

title: "제목",

contents: "내용",

isDone: false,

},

{

id: uuidv4(),

title: "제목2",

contents: "내용2",

isDone: true,

},

{

id: uuidv4(),

title: "제목3",

contents: "내용3",

isDone: false,

},

];

 

 

리듀서를 만든다!!

const todos = (state = initialState, action) => {

switch (action.type) {

case ADD_TODO:

return [...state, action.payload];

case REMOVE_TODO:

return state.filter((item) => item.id !== action.payload);

case SWITCH_TODO:

return state.map((item) => {

if (item.id === action.payload) {

return { ...item, isDone: !item.isDone };

} else {

return item;

}

});

default:

return state;

}

};

export default todos;

useSelector 를 이용하여 만든 함수를 이용하여 사용한다

 

useDispatch 를 이용하여 페이로드값을 보내준다