리덕스

투두리스트 리덕스 

 

액션을 만들고

 

리듀서를 정의한다.

export default todos; 를 통해 만든 리듀서를 내보내고,

 

configStore에 연결시킨다.

 

configStore는 여러 state가 모여있는 저장소라고? 보면된다.

 

const rootReucer = combineReducers({

todos,

}); 

 

를 통해 todos를 연결한다 todos 는 방금 만든 state집합

 

=============================================

 

import { v4 as uuid } 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 = [

{

title: "제목1",

contents: "내용1",

isDone: false,

id: uuid(),

},

{

title: "제목2",

contents: "내용2",

isDone: true,

id: uuid(),

},

{

title: "제목3",

contents: "내용3",

isDone: false,

id: uuid(),

},

];

 

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;

 

리덕스를 배우고 리액트를 편하게 사용하려고 배우는 거지만 state 저장소를 따로 빼서 사용하는게 익숙치 않다...