3/29 Redux

mm11game·2021년 3월 29일
0

dispatch로 action을 실행한다
action이 실행이 되면? state를 바꿀 수 있다.
reducer는 실제로 state를 바꾼다.
reducer가 실행이 되면? 최종적으로 store의 값이 변한다.

1. dispatch(loginUser(body))

loginUser라는 액션에 body값을 실어서 실행한다.
이 body값에는 email과 password가 들어간다.

2. action

export function loginUser(dataToSubmit){
    const request = axios.post(`${USER_SERVER}/login`,dataToSubmit)
                .then(response => response.data);

    return {
        type: LOGIN_USER,
        payload: request
    }
}

즉, body값에 들어온것을 dataToSubmit이 받을것이고 밑에 request 함수가 실행이 된다. 또한 이 함수가 실행이 끝나면 return값을 방출할 것이다. 즉 이 함수의 payload에는 response.data가 들어가게된다.

3. reducer

export default function(state={},action){
    switch(action.type){
      case LOGIN_USER:
            return { ...state, loginSucces: action.payload }
      default:
            return state;
    }
}

리듀서에서 action값을 매칭을 해 본 후, 즉 action의 type을 비교 후에, 안에 있는 return값이 실행이 된다. 본래의 state에 action.payload에 있는 값을 넣어서 최종적으로 state값을 변하게 한다.

4. store

위 함수가 모두 실행이 되었다면? state에 최종적으로는
{loginSuccess: response.data} 값이 들어가있는 상태가 된다.

profile
code newby

0개의 댓글