Store -> state와 state를 관리하는 방법!, 고로 Store안에는 state와 action이 존재한다.
Reducer : state와 action으로 이루어진 store의 구성조각
action : state를 변경하기 위한 방법
기존에는 const [todos, setTodos] = useState() 를 사용했음
reducer은 2개의 인자를 받음,
바로 State와 Action을 받는다.
const todos = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};
기존에 있던 todos는 props로 종속이 되었다.
그렇기 때문에 리덕스를 사용해야한다.
바로 modules폴더에 있는 todos.js를 가져오면 된다.
바로 useSelector를 통해,
const todos = useSelector((state) => state.todos);
Reducer
state(data)와 그 state를 다루는(변경하는) 방법을 가지고 있는 함수임
useSelector을 통해 store에서 todos를 읽어온거임
만약 users가 있으면 state.users로 읽어오면 됨
action
action은 객체이다.
type : 어떤일을 해라
payload : 얼만큼?
ex) remote_todo type을 보내고, payload(아이디) 만큼 지워라
dispatch
- action이란 type과 payload를 store에 던진다고 보면 된다.
- type과 payload를 담은 action 객체를 말아서 dispatch로 store에 던져주는 것!
이제 리덕스(화)를 해보자
- 기존에 props로 내린 것들을 지워보도록 하자
- 그리고 해당 컴포넌트 파일 위에 todos를 불러온다.
const todos = useSelector((state) => state.todos) - useDispatch를 불러온다
const dispatch = useDispatch()- 해당 함수를 사용하는 곳에 가서 dispatch(type, payload를 적어준다)
dispatch({action : 어떤일을 해라 , payload : 얼만큼 })
- todos.js에 가서 action인 type과 payload를 적어주자
리팩토링
각각의 "ADD_TODO"가 달라지면 오류가 나도 알아채기 쉽지 않음
왜냐면 default: return state로 빠져버리기 때문에.
따라서
Action items 에서 아래처럼 설정 후
export const ADD_TODO = "ADD_TODO";여기 input.jsx에 와서 ADD_TODO를 상수화 시키면 됨
dispatch({
type: ADD_TODO,
payload: newTodo,
});
}}dispatch(testfunc())가 나온 유래
기존에 있는 action 객체가 조금 번거롭다 그래서 switchTodo() 라는 함수로 줄여보려고 한다.
dispatch({
type: SWITCH_TODO,
payload: item.id,
});
따라서 redux에서 switchTodo라는 함수를 만들어서 export 해주면 됨
export const switchTodo = (payload) => {
return {
type: SWITCH_TODO,
payload,
};
};그럼 아래처럼 간결하게 사용이 가능함
dispatch(switchTodo(item.id));
여기서 todos = useSelector((state) => state.todos);를 한 이유는
밑에있는 todos를 통해서 map을 돌리기 위해서이다.
그러면 todos가 배열이라는 건가?
reducer 코드로 가보자
여기서 맨 밑에 보면 default 값이라면 state를 반환한다고 써있다.
그러면 state는 무엇일까?
바로 state = initialSTate이다.
그래서 위에서 todos를 불러온 것이다.
