짧은코딩

configureStore.js import { createWrapper } from "next-redux-wrapper"; import { applyMiddleware, compose, createStore } from "redux"; import { composeWithDevTools } from "redux-devtools-extension"; import createSagaMiddleware from "redux-saga"; import reducer from "../reducers"; import rootSaga from "../sagas"; const loggerMiddleware = ({ dispatch, getState }) => (next) => (action) => { console.l..

combineReducers combineReducers는 Reducer들을 모두 합쳐주는 것이다. 이것이 중요한 이유는 store에서 reducer를 단 1개만 받을 수 있기 때문이다. 따라서 combineReducers에서 Reducer들을 모두 합쳐주고 store에서 모두 합쳐진 reducer를 사용하면 된다. 사용 방법 reducers/index.ts import { combineReducers } from '@reduxjs/toolkit'; import { testSlice } from './TestSlice'; import { roadMapSlice } from './RoadMapSlice'; const reducer = combineReducers({ test: testSlice.reduce..

CRA로 RTK도 같이 설치하기 npx create-react-app my-app --template redux-typescript 이 명령어를 입력하면 리액트 폴더를 만들 때 Redux-ToolKit도 같이 설치하게 된다. 설치된 초기 코드 https://github.com/5hyun/redux_study/tree/main/RTK GitHub - 5hyun/redux_study Contribute to 5hyun/redux_study development by creating an account on GitHub. github.com 코드를 보기 위해서는 위 깃허브를 참고하면 된다. 중요하게 볼 폴더 app과 features 폴더를 참고하면 리덕스 툴킷 공부에 도움이 될것이다. -app app에는 da..

redux-toolkit redux-toolkit에는 immer, thunk, redux 등 개발자들이 많이 사용하는 라이브러리가 기본적으로 내장되어있다. -공식 사이트 https://redux-toolkit.js.org/introduction/getting-started Getting Started | Redux Toolkit redux-toolkit.js.org 제로초님은 공식 사이트에서 createSlice, createAsyncThunk를 읽어보는 것을 강력 추천한다고 한다. 왜냐하면 저 2개가 실무에서 가장 많이 사용되기 때문이다. 사용하기 -store.js const { configureStore } = require("@reduxjs/toolkit"); const reducer = requi..

불변성 유지 리덕스에서는 불변성을 유지하기 위해서 initialState.data = null; initialState.deep.deeper.deepest.a = 'b'; 이렇게만 바꿔도 되는 코드를 return { ...prevState, data: null, deep: { ...prevState.deep, deeper: { ...prevState.deeper, deepest: { ...prevState.deepest, a: 'b', } } } } 이렇게 복잡하게 바꿔줘야한다. 코딩하는 양도 많아지고 직관적이지 못하다. 이것을 편안하게 해주는 것이 immer라는 라이브러리이다. immer reducer는 action을 바탕으로 다음 state를 만들어내는 것이다. 그렇기에 reducer는 (이전 sta..

폴더 구조 https://shortcoding.tistory.com/396 redux-thunk 간단한 것은 thunk로 구현할 수 있지만 복잡한 것은 saga로 구현하는 것이 좋다. thunkMiddleware // thunkMiddleware는 아래 코드가 끝이라서 불러올 가치가 없다 // 기본적으로 action은 객체 const thunkMiddleware shortcoding.tistory.com 이 글에서 만들었던 actions와 reducers를 가져와서 사용했다. 다른 점이 있다면 index.js 파일은 store.js로 바꾸고 module로 바꿨다. client.jsx import React from 'react'; import ReactDOM from 'react-dom'; import ..

간단한 것은 thunk로 구현할 수 있지만 복잡한 것은 saga로 구현하는 것이 좋다. thunkMiddleware // thunkMiddleware는 아래 코드가 끝이라서 불러올 가치가 없다 // 기본적으로 action은 객체 const thunkMiddleware = (store) => (next) => (action) => { //비동기는 함수로 넣어주겠다는 약속 if (typeof action === "function") { return action(store.dispatch, store.getStats); } // 동기 return next(action); }; thunkMiddleware을 만들고 enhancer에 넣어준다. 동기는 기본적으로 객체로 받고, 비동기는 함수로 받는 것이 약속이다...

리덕스 미들웨어 action은 기본적으로 동기이다. action이 객체고 dispatch는 그냥 객체를 받아서 dispatch하는 역할이기 때문에 그 사이에 비동기가 들어갈 틈이 없다. 비동기를 하기 위해서는 미들웨어를 사용해야 한다. dispatch와 reducer 사이에 동작하는게 미들웨어이다. 리덕스 미들웨어로는 redux-thunk, redux-saga를 가장 많이 사용한다. 무조건 비동기를 위해서만 미들웨어를 사용하지는 않는다. 예를 들어 미들웨어에서 로깅도 할 수 있다. const store = createStore(reducer, initialState, enhancer); 위 매개변수의 순서가 정해져있다. enhancer가 store를 "덧붙이거나 증강시킨다"라는 의미이다. 따라서 enha..

원본 파일 const { createStore } = require("redux"); const reducer = (prevState, action) => { switch (action.type) { case "LOG_IN": return { ...prevState, user: action.data, }; case "LOG_OUT": return { ...prevState, user: null, }; case "ADD_POST": return { ...prevState, posts: [...prevState.posts, action.data], }; default: return prevState; } }; const initialState = { user: { isLoggingIn: true, data:..

Redux 서버에서 데이터 수정을 하면 프론트에서 값이 바뀌고, 프론트에서 데이터 수정을 하면 서버에서 값이 바뀌는 양방향 코딩을 하게되면 문제가 발생할 수 있다. 코드가 좀 복잡해지면 값이 이상하게 꼬일 수 있다. 따라서 Redux를 활용해서 데이터 관리를 쉽게 해줄 수 있다. Redux는 꼭 리액트에서만 사용하는 것은 아니다. 그치만 리액트에서 Redux를 많이 사용한다. -예시 리액트에서 A, B, C 컴포넌트가 있고 A가 제일 위 부모 태그, C가 제일 아래 자식 태그라 하면 state값을 다 따로 관리 해주게된다. 이 state를 다 같이 관리하기 위해서 Redux에 state를 저장하고 쉽게 관리 할 수 있다. 즉 컴포넌트 간의 state를 관리 할 때 사용하면 된다. 만약 컴포넌트 B에서만 ..