들어가기 전에

action을 발생시키면 그 action이 dispatch를 통해서 reducer를 실행시키고 reducer가 state의 새로운 값을 리턴합니다.

그리고 state 값이 바뀌면 subscribe 하는 함수들을 호출해 주는 것을 통해서 UI가 업데이트가 됩니다.

리덕스가 좋은 이유와 흐름을 항상 기억해주시길 바랍니다.

학습목표

action이 발생할 때 dispatch를 통해 전달할 수 있습니다.

핵심단어

• action
• dispatch
• event.preventDefault() 

강의 듣기

이번 시간에는 store의 state값을 변경해보고 action을 dispatch를 통해 전달해보겠습니다.

action을 발생시키면 그 action이 dispatch를 통해서 reducer를 실행시키고 reducer가 state의 새로운 값을 리턴합니다.

그리고 state 값이 바뀌면 subscribe 하는 함수들을 호출해 주는 것을 통해서 UI가 업데이트가 된다는 흐름입니다.

우선 글 목록 을 클릭했을 때 action을 만들어야 합니다. a 태그에 onclick 이벤트를 추가합니다.

 liTags = liTags + `
        <li>
            <a onclick="
                event.preventDefault();
                var action = {type:'SELECT', id:${state.contents[i].id}}
                store.dispatch(action);
            " href="${state.contents[i].id}">
                ${state.contents[i].title}
            </a>
        </li>`;

클릭하면 다른 페이지로 이동하지 못하게 하려면  event.preventDefault() 함수를 사용합니다.

 event.preventDefault()는 이벤트가 발생했을 때 그 이벤트를 발생시킨 태그의 기본적인 동작을 못하게 방지하는 함수입니다.

그 다음으로 action을 만들 때 action 에서 필수적인 property는 "type"입니다. 

그리고 우리가 선택한 정보를 알려줄 수 있도록 id도 추가합니다.

store의 dispatch에 이렇게 만든 action 정보를 넘겨줍니다. 그러면 store는 reducer를 호출합니다.

console.log(state,action);

정말 잘 호출되는지 확인하기 위해서 로그를 확인해 보겠습니다. state 의 값과 action 값이 잘 들어온 것을 볼 수 있습니다.

만약 action의 type이 SELECT 라면 새로운 newState 객체를 리턴합니다.

    var newState;
    if(action.type === 'SELECT'){
        newState = Object.assign({}, state, {selcted_id:action.id});
    }
    console.log(action, state, newState);
    return newState;

항상 state 값을 리턴할 때는 복제된 것을 리턴해야됩니다. Object.assign() 함수를 통해 복제할수있습니다.

 자 그다음에 현재 선택된 태그가 무엇인가 알려주기 위해서 selected_id 라고 하는 property를 사용하겠습니다. 

selcted_id:null

그러기 위해서는 최초 기본 태그에도 기본값이 있어야 합니다. 기본 값은 설정되지 않았다는 뜻의 null로 지정합니다.

log 와 store.getState() 함수를 통해 잘 동작하는 것을 확인할 수 있습니다. 

생각해보기

 onclick 과 onClick의 차이는 무엇일까요?