-
리덕스 간단한 주요 개념Programming/JavaScript 2021. 4. 25. 11:05반응형
리덕스(Redux) 란
Redux는 여러 컴포넌트에 사용되어지는 state를 분리 통합하여 관리할 수 있게끔 하고 이로 인한 안정성을 향상 시킬 수 있는
라이브러리입니다.
React의 state와 비슷하지만 사용하는 방식에 있어서는 React의 state에 비해 복잡한 편입니다.
Redux도 state를 관리하기 때문에 React의 state를 사용하지 않아도 됩니다. 하지만 상황에 따라 틀린 것이지 무조건 적으로 사용하지 않는 것은 아닙니다
주요 개념
Action
리덕스에서의 Action은 React state처럼 state를 바꾸는 방식입니다. 액션 객체를 가지고 있으며 반드시 type 필드를 가지고 있어야 합니다.
const LoggedIn = () => ({ type: "LOGIN" }); const LoggedOut = () => ({ type: "LOGOUT" });
Dispatch
디스패치는 위에서 설명한 Action을 발생시키는 것으로, 파라미터로 액션 객체를 넣어주면 됩니다.
const btnLogin = document.querySelector(".login") const btnLogout = document.querySelector(".logout") btnLogin.onclick = () => { store.dispatch(LoggedIn());}; btnLogout.onclick = () => { store.dispatch(LoggedOut());};
Reducer
변화를 일으키는 함수로 Action의 결과로 state를 어떻게 바꿀지 정의하는 부분
function reducer(state = initialState, action ) { //action.type에 따라서 작업을 처리 swtich ( action.type ) { case LOGIN: return { //로그인 관련 state 처리 }; case LOGOUT: return { //로그아웃 관련 state 처리 }; } default: return state } }
Store
store는 state와 action, reducer가 내장되어 있습니다.
'Programming > JavaScript' 카테고리의 다른 글
비동기처리, Promise, async/await 이해 (1) 2021.05.02 Array 메소드 slice, filter (0) 2020.05.10 자바스크립트 비디오 파일 길이 구하기 (0) 2020.03.19 자바스크립트 li태그 선택 - 실시간 댓글 삭제 (0) 2020.03.18 localstorage 에서 선택한 value 값 삭제 / filter() (0) 2019.12.23