Redux (8) 썸네일형 리스트형 20210702 Redux08 : redux-toolkit 사용법, createAction, createReducer, createSlice(reducers, extraReducers 작성법들), configureStore, createAsyncThunk Redux 08 redux-tookit 사용법 createAction, createReducer 방식 store middleware등의 환경을 건들지 안고 바로 적용할 수 있는 방식 하지만, 크게 코드가 줄어 들진 않음 createAction() redux-actions에서 제공하고 있던 createAction()과 같은 방식으로 작동한다. 기존의 Action creator를 세부적으로 만들 필요 없이 actionCreator를 통해서 type, payload 형태의 Actoin을 만들어줌 import { createAction } from "@reduxjs/toolkit"; const getUsersStart = createAction("GET_USERS_START"); const getUsersSuc.. 20210701 Redux07 : vanilla redux vs redux-actions vs redux-toolkit Redux 07 redux-actions 활용과 느낌 기존 환경 redux-actions를 사용하는 경우, 기본적으로 다른 여러가지 패키지들과 사용하게 된다. redux-actions : 리덕스 액션스는 덕스 패턴을 만들때 편하게 작성시켜 코드를 좀더 깔끔하게 해준다. react-redux : redux와 react를 연결할 때 쓰는 Provider, 그리고 react에서 state의 값을 가져오거나, 변경하고자 할때 요청을 useSeletor, useDispatch를 통해서 쉽게 사용할 수 있게함 redux-thunk : 비동기 작업을 Action으로 수행하고, 해당 작업을 통해 가져온 데이터 같은 것을 redux에 반영하게 할 수 있음 redux-devtools-extension : 리덕스 작업시 브.. 20210623 Redux06 : redux-saga, ES06 Generator 함수 문법, redux-saga 세팅&활용, redux-actions Redux 06 redux-saga 미들웨어 제너레이터 객체를 만들어 내는 제너레이터 생성 함수를 이용 리덕스 사가 미들웨어를 설정 -> 자신이 만든 사가 함수 등록 -> 사가 미들웨어 실행 -> 등록된 사가함수를 실행할 액션을 디스패치 함 npm i redux-saga redux-saga by 밸로퍼트 아래 부터는 밸로퍼트님의 redux-saga를 참고하여 작성 하였습니다. redux-thunk가 하지 못하는 일을 redux-saga가 할수 있게 해줌 비동기 작업을 할 때 기존 요청 취소 처리 특정 액션 발생시 다른 액션이 디스패치 되게처리 또는 JS 코드 실행 처리 API 요청이 실패 했을 때 재요청 작업 가능 등의 까다로운 비동기 작업들에서 사용 Generator 함수 Generator 함수의 경우.. 20210621 Redux05 : Ducks Pattern, react-router + redux (history Thunk 방식, connected-react-router방식) Redux 05 Ducks Pattern 어떤 라이브러리가 아닌, 많은 사람들이 redux를 가지고 코드를 짜는 좋은 패턴을 말함 ducks-modular-redux by JisuPark 기존 redux에서 ActionCreator, reducer, type이 계속 한 벌씩 생성되므로, 이를 한 묶음으로 모듈화 하여 관리하는 패턴을 제안함 ActionCreator, reducer, type을 한벌로 만들어 모듈화 시키고 해당 모듈을 combine하여 하나의 reducer로 만들어 해당 reducer로 store을 만들게 됨 Ducks : 1모듈 규칙 항상 reducer()란 이름의 함수를 export default 해야합니다. Combine시에 해당 파트 이름으로 불러와 사용하면 되기 때문에 항상 모듈의.. 20210618 Redux04 : MiddleWare(미들웨어), 미들웨어 라이브러리(Redux-devtools, Redux-thunk, Redux-promise-middleware) Redux 04 Redux MiddleWare (리덕스 미들웨어) Redux : MiddleWare velopert : Redux MiddleWare 미들웨어가 dispatch 의 앞뒤에 코드를 추가할 수 있게 해줌 dispatch 메소드를 통해 store로 가고 있는 Action을 가로채는 코드 미들웨어가 여러개면 미들웨어가 순차적으로 실행됨 스토어를 만들때, 미들웨어를 설정함 applyMiddleware()함수로 미들웨어들을 묶어서 createStore()함수의 두번째 인자로 넣어줌 디스패치가 호출 될때 실제로 미들웨어를 통과하는 부분 디스패치가 호출 될때 마다 미들웨어에서 action을 인자로 받는 부분이 실행됨 next() : next()가 호출된 곳의 미들웨어 다음에 다른 미들웨어가 있는 경우 .. 20210617 Redux03 : Redux 개요 와 Component를 만드는 과정 정리, Async Action with Redux(MiddleWare 없이) Redux 03 redux 개요 정리 리덕스는 앱에서 사용하는 state, props를 독립적으로 사용하기 위해서 데이터를 처리하는 역할을 함 데이터를 모두 받아 가지고 있기(독립적인 관리를 위해서) 수정 요청있으면 수정하기 필요한 위치에 보내기 리덕스에서 데이터를 가져오는건 useSelector 데이터를 넣어 리덕스에게 수정요청은 dispatch ActionCreator가 데이터를 받아 Action으로 만들고 해당 Action에는 데이터 가공 방식과 해당 데이터가 들어 있다. 이를 dispatch가 받아 전달하여 reducer가 store의 state를 변경함 Component - props(state or function) - Container(ActionCreator - Action - dispat.. 20210616 Redux02 : React에 redux 연결01(props, Context전달, Hooks&모듈로 관리), react-redux로 연결(Presentational vs Container , Container 만들기, reac-redux hook 방식) Redux 02 React에 Redux 연결하기 01 : react-redux 안쓰고 연결 store를 props로 전달하는 경우 만들어진 store를 props로 전달하여, store를 사용할 수 있게 함 Props 전달 // index.js ReactDOM.render( , document.getElementById("root") ); 전달 받은 Props로 store 활용하기 Store만 컴포넌트에서 가지게 되면 store의 변화에 반응하거나, store에 변화를 줄수 있음 import logo from "./logo.svg"; import "./App.css"; import { useEffect, useState } from "react"; import { addTodo } from "./redu.. 20210615 Redux01 : Redux의 개념, Store, Action, Reducer, 데이터 구조에 따른 설계, combineReducers, reducers 모듈화 Redux 01 Redux Basic Component들 간의 정보 전달 과정에서 불편함을 느끼고 contextAPI를 사용하는데 Redux는 해당 context에 있는 전역 데이터를 효과적인 관리하는 라이브러리 임 Redux는 Store라는 독립적인 부분 딱 하나 존재하는데(단일 스토어), 어느 Component에서 store의 state를 변경하면 store에서 연관된 다른 Component를 rerender 시킴 단일 스토어 사용 준비 스토어 만들기 import redux 액션 정의 -> 액션을 사용하는 리듀서 만듦 -> 리듀서들을 합침 -> 최종 합쳐진 리듀서를 인자로 단일 스토어를 만듦 스토어 사용하기 import react-redux connect() 함수를 이용해서 컴포넌트에 연결 Actio.. 이전 1 다음
