본문 바로가기

Redux

 (7)
immer[Redux] immer는 currentState의 프록시객체인 임시 draftState를 생성하여 수정, nextState를 생성하게 된다. 불변성을 유지하기위해 기존 reducer에서는 전개연산자 ,concat,filter,map같은 함수를 이용했지만 가독성이 떨어지면 직관적이지 않다는 단점이 있다 immer를 활용하면 이부분을 해소할수 있다 설치 npm i immer produce(currentState, producer: (draftState) => void): nextState currentState : 현재 state draftState : 현재 state의 프록시객체(복사판같은) nextState : producer 함수가 반환하는 값 사용예시 immer이용한 reducer const { produce }..
redux-persist[Redux] Redux-Persist 사용하여 Store 유지하기 머무르고 있는 페이지에서, useSelector로 store 상태만 가져와 사용하여 개발하던 도중, 새로 고침하면 기존의 store가 초기화되는 문제를 겪었습니다. 해결 방법으로 LocalStorage와 SessionStorage의 storage를 redux에서 사용하게 해주는 Redux-Persist 라이브러리를 사용하여 해결했습니다. 1. 파일 구성 Reducer를 관리하는 reducer/index.js store를 생성하는 reducer/store.js App.js 에서 store를 제공하기 위한 /index.js 2. 기본 사용 reducer/index.js import { combineReducers } from "redux"; import ..
redux toolkit[Redux] Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식 제공하는 개발도구이다. Redux Toolkit은 아래와 같은 Redux의 문제점을 보완하기 위해 등장하였다. 기존 Redux 사용시 문제점 저장소 구성의 복잡성 많은 패키지 필요성(의존성) 한 작업 시 필요한 수 많은 코드양(boilerplate) 리덕스를 라이브러리 없이 사용 시 1개의 액션을 생성해도 액션타입 정의 -> 액션함수 생성 -> 리듀서 정의 의 작업이 필요하다. 많아지는 액션을 관리하기 위해 redux-actions을, 불변성 보존을 위한 immer, store값을 효율적으로 핸들링하여 불필요한 리렌더링을 막기 위해 reselect, 비동기 작업을 위한 thunk 와 saga 등 리덕스의 유효한 기능..
redux-promise-middleware[Redux] 이 미들웨어는 프로미스 기반의 비동기 작업을 조금 더 편하게 해주는 미들웨어입니다. 우선, 설치와 적용을 먼저 해보도록 하겠습니다. 설치와 적용 $ yarn add redux-promise-middleware 이 미들웨어는, 프로미스가 payload 로 전달되면, 요청이 시작, 성공, 실패 할 때 액션의 뒷부분에 _PENDING, _FULFILLED, _REJECTED 를 반환합니다. 이 뒷부분에 붙는 접미사는 커스터마이징 할 수도 있는데요, 우리의 기존 코드에서는 FULFILLED, REJECTED 대신, SUCCESS, FAILURE 를 사용하니, 이를 임의 값으로 설정하도록 하겠습니다. 다음은, 미들웨어를 적용하는 코드입니다. src/store.js import { createStore, apply..
redux-thunk[Redux] redux-thunk 리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할 때 가장 기본적인 방법으로는 redux-thunk 라는 미들웨어를 사용하는것입니다. 이 미들웨어는 리덕스를 개발한 Dan Abramov 가 만든 것이며, redux 공식 매뉴얼에서도 이 미들웨어를 사용하여 비동기 작업을 다룹니다. 이를 사용하여 비동기 작업을 관리하는건 매우 직관적이고 간단합니다. 미들웨어는 함수 세 개가 중첩된 구조이다. //dispatch 와 reducer사이에 동작하는게 미들웨어다. //매개변수3개가들어가는 함수, 밑에처럼 사이사이에 함수를 실행할 필요가 없는경우 const firstMiddleware = (store) => (dispatch) => (action) => { //미들웨어 예시1 consol..
combineReducers , createStore , applyMiddleware[Redux] 1. combineReducers redux를 사용시, 유의할 점은 앱에 하나 이외의 스토어를 만들면 안된다는 것이다. 그렇기에 코드의 유지보수를 위해서 단위별로 reducer를 분기하여 사용하게 되는게 일반적인데 => 이때, 여러개의 reducer들을 단!!! 하나의 reducer로 사용하기 위해 combineReducers가 필요하다 const { combineReducers } = require('redux'); const userReducer = require('./user'); const postReducer = require('./post'); module.exports = combineReducers({ user: userReducer, posts: postReducer, }); 2. cre..
redux[Redux] React 부모 컴포넌트인 App에서 모든 것을 관리하고 데이터를 아래로 내려주는 구조 장점 : 직관적이며, 데이터 관리를 한 곳에서 하기 때문에 관리하기 편하다. 단점 : 앱의 규모가 커졌을 때를 생각해볼 수 있다. -> 복잡성 React + Redux Redux 는 애플리케이션의 상위에 자리잡은 글로벌 Store를 만들어서 다른 모든 컴포넌트로 State를 공급한다. 데이터를 전역에서 관리하는데 이를 관리하는 곳이 Store 이고 내부에 Action 에 따른 데이터 값을 변화시켜주는 순수함수 Reducer가 정의되어있다. 즉 Redux는 React 상태관리 라이브러리 이다. React는 React컴포넌트에서 개별적으로 state를 관리한다. 그러나 Redux를 사용하면 state를 별도의 전용 장소인..

티스토리툴바