미들웨어1. thunk 목차 미들웨어 추가 미들웨어 작동방식 기본 예제코드 응용 예제코드 1. 미들웨어 추가 Redux 툴킷 'configureStore' 사용 : API는 저장소 생성동안 자동으로 thunk 미들웨어를 추가함(옵션 설정 필요 없음) applyMiddleware() 메서드 사용: 저장소에 thunk 미들웨어를 수동으로 추가하는 방법(메서드의 인자값으로 미들웨어 전달) 2. 미들웨어의 작동 방식 가장 바깥쪽에 있는 함수는 저장소의 dispatch와 getState를 포함하는 store API 객체를 전달받는다. 가운데 함수는 체인의 내부에 있는 next 미들웨어 또는 실제 store.dispatch() 메서드를 전달받는다. 가장 안쪽에 있는 함수는 각각의 action들과 함께 호출될 것이다. 3. 기본 예제 코드.. 2022. 5. 4. redux이론5. 미들웨어 목차 미들웨어란? 미들웨어 사용 이유? 미들웨어 종류 applyMiddleware() 메서드 1. 미들웨어란? 디스패치 함수를 결합해서 새로운 dispatch 함수를 반환하는 고차함수 종종 비동기 action을 일반 action으로 전환함 함수 결합을 통해 결합 가능(action logging, routing, 비동기 API 호출 등의 일련의 동기 action으로 전환 용이) 2. 미들웨어 사용 이유? 미들웨어는 리덕스와 관련된 로직을 UI layer와 분리시켜 작성 가능케 한다. 이러한 리덕스 관련 로직들은 side effects를 가질 수 있는데, reducers(리듀싱 함수)들은 side effect를 가져서는 안된다. 하지만 실제 앱은 이펙트를 가지는 로직이 필요할 수도 있으며, 몇몇 이펙트들은 .. 2022. 5. 4. redux이론1. 기본 목차 Redux란? Redux 사용의 장점 Redux의 3가지 기본 원칙 Redux의 두가지 유형 리덕스의 사용법은 context API와 비슷하다. 근데 왜 리덕스를 많이쓸까? 바로 비동기처리 때문이다. 리덕스에는 미들웨어 존재하며, 리듀서가 state 반환 전 미들웨어에 먼저 들어가며 state를 바꿀 수 있는 내용을 미들웨어에서 결정한다. 그렇다면, 이번 게시글에서는 Redux 기본 개념에 대해서 알아보자 1. Redux란? JS 앱을 위한 예측 가능한 state 컨테이너 객체 const redux = require('redux') console.log(redux) // { // __DO_NOT_USE__ActionTypes: { // INIT: '@@redux/INITz.m.5.d.a.h.r', .. 2022. 5. 3. redux이론3. combineReducers(reducers) 목차 combineReducers란? 작성예시 state의 key 제어 방법 combineReducers()의 인자값 리듀싱 함수들에 대한 규칙 앱이 점점 복잡해지면 코드가 길어지고, 길고 복잡한 코드는 가독성을 떨어트린다. 또한 모든 업데이트 로직을 하나의 reducer에 작성하는 경우 유지보수가 용이하지 않다. 그래서 이번 게시글에서는 reducer를 한번 분리해보자! 1. combineReducer란? 각기 다른 reducer를 값으로 가진 객체를 받아서 createStore의 매개변수로 전달할 하나의 reducer로 변환해줌 생성된 reducer는 내부의 모든 reducer를 호출하고 결과를 모아서 하나의 state 객체로 변환해줌 state 객체의 형태는 reducers로 전달된 키들을 따름 2.. 2022. 5. 3. redux이론2. store 목차 store란? store 메서드(getState(), dispatch(), subscribe()) action 객체란? 1. store란? 1-1. 설명 앱의 전체 state 트리를 가지고 있는 저장소 저장소 안의 state를 바꾸는 유일한 방법은 action을 전달하는 것 저장소를 생성하기 위해서는 root reducing 함수를 createStore()메서드에 전달해야 함 객체 const store = createStore(reducer) //const [state,dispatch] = useReducer(reducer, initialState) // 두 코드는 비슷한 코드, store는 state와 dispatch라고 보면 됨 console.log(store) // store는 객체이다. //.. 2022. 5. 3. redux실습2. reducer 기본 1. 환경 셋팅 1-1. 설치 $ npm install redux react-redux 1-2. 불러오기 const redux = require('redux') 3. 실습 3-1. 레벨1 (1) 코드 const redux = require('redux') const {createStore} = redux const reducer = (state, action) => { if (action.type === `O'brien`) { return { name: 'conan' } } else if (action.type === 'cases_up'){ return{ ...state, cases: state.cases +1 } } else { return { name: 'Edogawa', cases: 0 } } } .. 2022. 5. 3. 이전 1 다음
