티스토리 뷰

웹/react

리덕스(redux) 사용법1

안양사람 2020. 7. 2. 15:55
728x90
SMALL

먼저 오늘은 HTML에서 사용하는 법을 알아보겠습니다. 나중에 리액트와 연동하는 글을 올릴계획입니다.

(이고잉님의 강의를 참고하였습니다.)

 

https://redux.js.org/

 

Redux - A predictable state container for JavaScript apps. | Redux

A predictable state container for JavaScript apps.

redux.js.org

Get Started를 누르면 시작하는 법이 나와있습니다.

 

오늘은 간단히 html로 할것이기 때문에 npm install은 사용하지 않고

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.js"></script>
  </head>

위에 코드만 붙여넣기 하시면 됩니다.

 

그리고 redux devtools를 검색하셔서 깔면(chrome에서만) 시간여행이나 변화된 상태를 보는 것을 할수 있습니다.

 

 

state, action

먼저 state는 말그대로 현재 상태를 나타내는 용어이고

상태에 변화를 줄 때 action을 발생시킵니다.

 

function reducer(state,action)

이는 변화를 일으키는 함수입니다. 위에서 설명한 state와 action을 인자로 가지며 이를 가지고 적절히 변화시킵니다.

이 때 주의해야 될 점이 배열에 push를 하는 것이 아니라 새로운 배열을 넣어야 합니다.

예를들면 아래 예시처럼 concat이나 assign메서드를 이용해서 복사한다음 newState를 return하는 것입니다.

function reducer(state, action) {
        if (state === undefined) {
          return {
            max_id: 2,
            mode: "welcome",
            selected_id: 2,
            contents: [
              { id: 1, title: "HTML", desc: "HTML is ..." },
              { id: 2, title: "CSS", desc: "CSS is ..." },
            ],
          };
        }
        var newState;
        if (action.type === "SELECT") {
          newState = Object.assign({}, state, {
            selected_id: action.id,
            mode: "read",
          });
        } else if (action.type === "CREATE") {
          var newMaxId = state.max_id + 1;
          var newContents = state.contents.concat();
          newContents.push({
            id: newMaxId,
            title: action.title,
            desc: action.desc,
          });
          newState = Object.assign({}, state, {
            max_id: newMaxId,
            contents: newContents,
            mode: "read",
          });
        } else if (action.type === "DELETE") {
          var newContents = [];
          var i = 0;
          while (i < state.contents.length) {
            console.log(state.contents[i]);
            if (state.selected_id !== state.contents[i].id) {
              newContents.push(state.contents[i]);
            }
            i = i + 1;
          }
          newState = Object.assign({}, state, {
            contents: newContents,
            mode: "welcome",
          });
        } else if (action.type === "CHANGE_MODE") {
          newState = Object.assign({}, state, { mode: action.mode });
        }
        console.log(action, state, newState);
        return newState;
      }

store

말 그대로 스토어입니다. 리덕스에서는 한 어플리케이션에 스토어가 단 한개 존재합니다.

var store = Redux.createStore(reducer);

 

dispatch

디스패치는 액션을 발생시킵니다. 즉 아래 예시를 보면 type과 mode를 변화시킨 것입니다. 그리고 리듀서 함수를 실행시켜 새로운 상태로 변경시킵니다.

store.dispatch({
	type:'CHANGE_MODE',
	mode:'create'
})

 

subscribe

액션이 dispatch되었을 때 인자의 함수가 호출됩니다.

store.subscribe(article);
article();

 

 

출처

https://opentutorials.org/course/1

 

생활코딩

hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다.  어떻게 공부할 것인가를 생각해보기 전에 왜 프로그

opentutorials.org

 

728x90
LIST

'웹 > react' 카테고리의 다른 글

리액트란  (0) 2021.06.01
리액트 자동완성 및 ㅎㅎ  (0) 2021.01.26
react와 서버(nodejs express) 연결하기  (0) 2020.07.10
리액트리덕스(react, redux) 사용법  (0) 2020.07.03
리덕스(redux)란  (0) 2020.07.02
댓글
공지사항