0
React - React Router Dom 사용하기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 React Router Dom 추가하기# npm 사용npm install react-router-dom# yarn 사용yarn add react-router-dom
Category: Redux
0
Redux Saga
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux Saga 액션을 모니터링하고 있다가 특정 Action 이 발생하면 특정 작업을 진행한다. 비동기 작업을 진행할 때 기존 요청을 취소 할 수 있다. 특정 Action 이 발생했을 때 다른 액션을 디스패치 하거나 자바스크립트 코드를 실행할 수 있다. Generator 에 기반한 미들웨어 Generator 함수의 흐름을 특정 구간에 멈춰 놨다가 다시 실행 할 수 있다.return 값을 여러번 보낼 수 있다. import { delay, put, takeEvery, takeLatest } from "redux-saga/effects";const SET_DIFF = "counter/SET_DIFF";const INCREASE = "counter/INCREASE";const DECREASE = "counter/DECREASE";const INCREASE_ASYNC = "NCREASE_ASYNC";const DECREASE_ASYNC = "DECREASE_ASYNC";export const setDiff = (diff) => ({ type: SET_DIFF, diff });export const increase = () => ({ type: INCREASE });export const decrease = () => ({ type: DECREASE });export const increaseAsync = () => ({ type: INCREASE_ASYNC });export const decreaseAsync = () => ({ type: DECREASE_ASYNC });function* increaseSaga() { yield delay(1000); yield put(increase()); // put 은 dispatch 와 비슷한 개념}function* decreaseSaga() { yield delay(1000); yield put(decrease());}export function* counterSaga() { yield takeEvery(INCREASE_ASYNC, increaseSaga); yield takeLatest(DECREASE_ASYNC, decreaseSaga);}const initialState = { number: 0, diff: 1,};export default function counter(state = initialState, action) { switch (action.type) { case SET_DIFF: return { ...state, diff: action.diff, }; case INCREASE: return { ...state, number: state.number + state.diff, }; case DECREASE: return { ...state, number: state.number - state.diff, }; default: return state; }} import React from "react";import { useSelector, useDispatch } from "react-redux";import Counter from "./Counter";import { increase, decrease, setDiff, increaseAsync, decreaseAsync,} from "../modules/counter";const CounterContainer = () => { const { number, diff } = useSelector((state) => ({ number: state.counter.number, })); const dispatch = useDispatch(); // const onIncrease = () => dispatch(increase()); // const onDecrease = () => dispatch(decrease()); const onIncrease = () => dispatch(increaseAsync()); const onDecrease = () => dispatch(decreaseAsync()); const onSetDiff = (diff) => dispatch(setDiff(diff)); return ( <Counter number={number} diff={diff} onIncrease={onIncrease} onDecrease={onDecrease} onSetDiff={onSetDiff} /> );};export default CounterContainer;
0
Redux Middleware 만들기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux Middleware 만들기Middleware 생성Dispatch 되는 이력을 콘솔로 찍는 로거를 만든다. const myLogger = store => next => action => { console.log(action); const result = next(action); // 반환하는 result 는 Container 에서 Disaptch 됐을 때 결과 물이 result return result;}export default myLogger; Middleware 적용applyMiddleware 함수를 이용해 Redux 에 미들웨어를 적용한다. import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import reportWebVitals from './reportWebVitals';import { createStore, applyMiddleware } from 'redux';import rootReducer from './modules';import { Provider } from 'react-redux';import myLogger from './middlewares/myLogger';const store = createStore(rootReducer, applyMiddleware(myLogger));ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root'));reportWebVitals();
0
Redux 사용하기 - 계산기 만들기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 라이브러리 설치 yarn add react-redux Action Type 정의/* 액션 타입 만들기 */// Ducks 패턴을 따를땐 액션의 이름에 접두사를 넣어주세요.// 이렇게 하면 다른 모듈과 액션 이름이 중복되는 것을 방지 할 수 있습니다.const SET_DIFF = "counter/SET_DIFF";const INCREASE = "counter/INCREASE";const DECREASE = "counter/DECREASE"; Action 생성 함수/* 액션 생성함수 만들기 */// 액션 생성함수를 만들고 export 키워드를 사용해서 내보내주세요.export const setDiff = (diff) => ({ type: SET_DIFF, diff });export const increase = () => ({ type: INCREASE });export const decrease = () => ({ type: DECREASE }); Reducer
0
Redux 사용하기 - 계산기 만들기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 라이브러리 설치Action 정의하기export const INCREASE = "counter/INCREASE" as const;export const DECREASE = "counter/DECREASE" as const;interface increaseAction { type: typeof INCREASE;}interface decreaseAction { type: typeof DECREASE;}export type CounterType = increaseAction | decreaseAction; Action 생성 함수export const increase = (): increaseAction => ({ type: INCREASE,});export const decrease = (): decreaseAction => ({ type: DECREASE,}); Stateinterface CounterState { value: number;}const initialState: CounterState = { value: 0,};
0
Redux 사용하기
목차 Redux Saga Redux Middleware 만들기 Redux 사용하기 - 계산기 만들기 Redux 사용하기 Redux 사용하기 하나의 애플리케이션 안에는 하나의 Store 가 존재 State 는 읽기 전용 불변성 을 지켜줘야 한다. 객체의 경우 Spread 연산자 를 사용해 기존 객체를 덮어써준다. 배열의 불변성을 지켜주는 내장함수를 사용해야 한다. 불변성을 지켜야만 Component 들이 제대로 Rerendering 된다. 변화를 일으키는 함수, Reducer 는 순수한 함수 여야 한다. Reducer 는 이전 상태 와 Action 객체 를 파라미터로 받는다. 이전 상태를 변경하지 않고 새로운 상태를 만들어 반환한다.(불변성 유지) 똑같은 파라미터로 호출된 리듀서는 언제나 똑같은 결과값을 반환해야 한다. Redux 모듈 설치yarn add react-redux Action 상태의 변화가 필요할 경우 Action 을 일으킨다.