2023-02-16(리덕스의 흐름)

리덕스 흐름 이해하기 with ducks-pattern

1. input값을 받는다.
2. 그 값을 dispatch를 통해store로 보내려한다
3. input의 인자를 받아 그대로 dispatch의 액션생성함수에 넣고 리듀서로 보낸다(인자는 개수만 맞으면 된다. 내가 원하는 이름 뭐든지 붙이면 장땡)
4. 리듀서의 payload에 영향을 받고 action에 들어간다.
5. dispatch에 있는 액션생성함수의 type에 맞게 리듀서에서 찾아서 return한다
6. 그 return한 값을 export 를 해서 store에 넣어준다.

🍀🍀덕스패턴이란?🍀🍀
action value - action creator - reducer 순으로 정리한 패턴!!

• input값을 받아서 넘겨주기

 <<StOneButton  onClick={() => {
     movehandler(item.id, item.isDone); ---->movehandler이라는 변수에 ()인자를 넘겨줄겨
 }}   >

• dispatch로 보내기

const movehandler = (id, isDone) => {
    dispatch(moveDodone(id, !isDone)); //--->이 인자는 action crateor에서 받아온 것. 이제 이것을 리듀서의 action에 담는다
  };

• action creator(액션생성함수)

export const moveDodone = (id, isDone) => {      -------->인자에는 payload만 써도된다
  return {
    type: MOVE,
    id,                                          ---------> 그럼 여기도 payload써야겠지
    isDone,
  };
};

• 리듀서로 보내기

//reducer
const todolist = (state = initialState, action) => {   ------>dispatch가 담긴 action
  switch (action.type) {
    case ADD:
      return [
        ...state,
        { id: Date.now(), title: action.title, content: action.content, isDone: false },
      ];
    case DEL:
      return state.filter((item) => item.id !== action.id);
    case MOVE:                           -------->type종류를 확인하고 여기로 들어온다.
      return state.map((todo) => {       
        if (todo.id === action.id) {
          return { ...todo, isDone: action.isDone };
        }
        return todo;
      });
    default:
      return state;
  }
};  
export default todolist;          ---------->마지막으로 store로 export