42일차

🥸

42일차

Part 11. Redux 로 상태관리하기

Ch 2. Redux Advanced (1)

Ch 3. Redux Advanced (2)

Ch 2. Redux Advanced

🔗 Async Action with Redux (not use 미들웨어)

API 호출은 보통 componentDidMount 시점에 해야 한다.

$ npm i axios

// ./redux/action.js

...

// users

// 깃헙 API 호출을 시작하는 것을 의미
export const GET_USERS_START = "GET_USERS_START";

// 깃헙 API 호출에 대한 응답이 성공적으로 돌아온 경우
export const GET_USERS_SUCCESS = "GET_USERS_SUCCESS";

// 깃헙 API 호출에 대한 응답이 실패한 경우
export const GET_USERS_FAIL = "GET_USERS_FAIL";

export function getUsersStart() {
  return {
    type: GET_USERS_START,
  };
}

export function getUsersSuccess(data) {
  return {
    type: GET_USERS_SUCCESS,
    data,
  };
}

export function getUsersFali(error) {
  return {
    type: GET_USERS_FAIL,
    error,
  };
}

// ./redux/reducers/users.js

import { GET_USERS_FAIL, GET_USERS_START, GET_USERS_SUCCESS } from "../actions";

const initialState = { loading: false, data: [], error: null };

export default function users(state = initialState, action) {
  if (action.type === GET_USERS_START) {
    return {
      ...state,
      loading: true,
      error: null,
    };
  }

  if (action.type === GET_USERS_SUCCESS) {
    return {
      ...state,
      loading: false,
      data: action.data,
    };
  }

  if (action.type === GET_USERS_FAIL) {
    return {
      ...state,
      loading: false,
      error: action.error,
    };
  }

  return state;
}

// ./redux/reducers/reducer.js

import { combineReducers } from "redux";
import todos from "./todos";
import filter from "./filter";
import users from "./users";

const reducer = combineReducers({
  todos,
  filter,
  users,
});

export default reducer;

// ./containers/UserListContainer.jsx

import { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import UserList from "../components/UserList";
import { getUsersFali, getUsersStart, getUsersSuccess } from "../redux/actions";
import axios from "axios";

export default function UserListContainer() {
  const users = useSelector((state) => state.users.data);
  const dispatch = useDispatch();

  const getUsers = useCallback(async () => {
    try {
      dispatch(getUsersStart());
      const res = await axios.get("https://api.github.com/users");
      dispatch(getUsersSuccess(res.data));
    } catch (error) {
      dispatch(getUsersFali(error));
    }
  }, [dispatch]);

  return <UserList users={users} getUsers={getUsers} />;
}

// ./components/UserList.jsx

import { useEffect } from "react";

export default function UserList({ users, getUsers }) {
  useEffect(() => {
    getUsers();
  }, [getUsers]);

  if (users.length === 0) {
    return <p>현재 유저 정보 없음</p>;
  }

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.login}</li>
      ))}
    </ul>
  );
}

🔗 리덕스 미들웨어

https://redux.js.org/tutorials/fundamentals/part-4-store#middleware

Redux Fundamentals, Part 4: Store | Redux

The official Redux Fundamentals tutorial: learn how to create and use a Redux store

redux.js.org

미들웨어가 "디스패치" 의 앞뒤에 코드를 추가할수 있게 해줍니다.
미들웨어가 여러개면 미들웨어가 "순차적으로" 실행됩니다.
두 단계가 있습니다.
- 스토어를 만들때, 미들웨어를 설정하는 부분
  - {createStore, applyMiddleware} from redux
- 디스패치가 호출될때 실제로 미들웨어를 통과하는 부분
dispatch 메소드를 통해 store로 가고 있는 액션을 가로채는 코드

import { applyMiddleware } from "redux";

// ./redux/stroe.js

import { applyMiddleware, createStore } from "redux";
import reducer from "./reducers/reducer";

function middleware1(store) {
  console.log("middleware1", 0);
  return (next) => {
    console.log("middleware1", 1, next);
    return (action) => {
      console.log("middleware1", 2);
      const returnValue = next(action);
      console.log("middleware1", 3);
      return returnValue;
    };
  };
}

function middleware2(store) {
  console.log("middleware2", 0);
  return (next) => {
    console.log("middleware2", 1, next);
    return (action) => {
      console.log("middleware2", 2);
      const returnValue = next(action);
      console.log("middleware2", 3);
      return returnValue;
    };
  };
}

const store = createStore(reducer, applyMiddleware(middleware1, middleware2));

export default store;

🔗 redux-devtools

$ npm i redux-devtools-extension -D

import { composeWithDevTools } from "redux-devtools-extension";

// ./redux/store.js

import { applyMiddleware, createStore } from "redux";
import reducer from "./reducers/reducer";
import { composeWithDevTools } from "redux-devtools-extension";

const store = createStore(reducer, composeWithDevTools(applyMiddleware()));

export default store;

🔗 redux-thunk ⭐

https://github.com/reduxjs/redux-thunk

GitHub - reduxjs/redux-thunk: Thunk middleware for Redux

Thunk middleware for Redux. Contribute to reduxjs/redux-thunk development by creating an account on GitHub.

github.com

리덕스 미들웨어
리덕스를 만든 사람이 만들었음. (Dan)
리덕스에서 비동기 처리를 위한 라이브러리
액션 생성자를 활용하여 비동기 처리
액션 생성자가 액션을 리턴하지 않고, 함수를 리턴함.

$ npm i redux-thunk

import thunk from "redux-thunk";

// ./redux/store.js

import { applyMiddleware, createStore } from "redux";
import reducer from "./reducers/reducer";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";

const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)));

export default store;

// ./redux/action.js

import axios from "axios";

...

export function getUsersThunk() {
  return async (dispatch) => {
    try {
      dispatch(getUsersStart());
      const res = await axios.get("https://api.github.com/users");
      dispatch(getUsersSuccess(res.data));
    } catch (error) {
      dispatch(getUsersFali(error));
    }
  };
}

// ./container/UserListContainer.jsx

import { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import UserList from "../components/UserList";
import { getUsersThunk } from "../redux/actions";

export default function UserListContainer() {
  const users = useSelector((state) => state.users.data);
  const dispatch = useDispatch();

  // const getUsers = useCallback(async () => {
  //   try {
  //     dispatch(getUsersStart());
  //     const res = await axios.get("https://api.github.com/users");
  //     dispatch(getUsersSuccess(res.data));
  //   } catch (error) {
  //     dispatch(getUsersFali(error));
  //   }
  // }, [dispatch]);

  const getUsers = useCallback(() => {
    dispatch(getUsersThunk());
  }, [dispatch]);

  return <UserList users={users} getUsers={getUsers} />;
}

🔗 redux-promise-middleware

https://github.com/pburtchaell/redux-promise-middleware

GitHub - pburtchaell/redux-promise-middleware: Enables simple, yet robust handling of async action creators in Redux

Enables simple, yet robust handling of async action creators in Redux - GitHub - pburtchaell/redux-promise-middleware: Enables simple, yet robust handling of async action creators in Redux

github.com

$ npm i redux-promise-middleware

import promise from "redux-promise-middleware";

// ./redux/store.js

import { applyMiddleware, createStore } from "redux";
import reducer from "./reducers/reducer";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";

const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(thunk, promise))
);

export default store;

// ./reudx/action.js

import axios from "axios";

...

const GET_USERS = "GET_USERS";

export const GET_USERS_PENDING = "GET_USERS_PENDING";
export const GET_USERS_FULFILLED = "GET_USERS_FULFILLED";
export const GET_USERS_REJECTED = "GET_USERS_REJECTED";

export function getUsersPromise() {
  return {
    type: GET_USERS,
    payload: async () => {
      const res = await axios.get("https://api.github.com/users");
      return res.data;
    },
  };
}

// ./redux/users.js

import {
  GET_USERS_FAIL,
  GET_USERS_FULFILLED,
  GET_USERS_PENDING,
  GET_USERS_REJECTED,
  GET_USERS_START,
  GET_USERS_SUCCESS,
} from "../actions";

const initialState = { loading: false, data: [], error: null };

export default function users(state = initialState, action) {
  if (action.type === GET_USERS_START || action.type === GET_USERS_PENDING) {
    return {
      ...state,
      loading: true,
      error: null,
    };
  }

  if (action.type === GET_USERS_SUCCESS) {
    return {
      ...state,
      loading: false,
      data: action.data,
    };
  }
  if (action.type === GET_USERS_FULFILLED) {
    return {
      ...state,
      loading: false,
      data: action.payload,
    };
  }

  if (action.type === GET_USERS_FAIL) {
    return {
      ...state,
      loading: false,
      error: action.error,
    };
  }
  if (action.type === GET_USERS_REJECTED) {
    return {
      ...state,
      loading: false,
      error: action.payload,
    };
  }

  return state;
}

// ./containers/UserListContainer.jsx

import { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import UserList from "../components/UserList";
import { getUsersPromise, getUsersThunk } from "../redux/actions";

export default function UserListContainer() {
  const users = useSelector((state) => state.users.data);
  const dispatch = useDispatch();

  // const getUsers = useCallback(async () => {
  //   try {
  //     dispatch(getUsersStart());
  //     const res = await axios.get("https://api.github.com/users");
  //     dispatch(getUsersSuccess(res.data));
  //   } catch (error) {
  //     dispatch(getUsersFali(error));
  //   }
  // }, [dispatch]);

  const getUsers = useCallback(() => {
    dispatch(getUsersPromise());
  }, [dispatch]);

  return <UserList users={users} getUsers={getUsers} />;
}

🔗 Ducks Pattern ⭐

https://github.com/erikras/ducks-modular-redux

GitHub - erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux

A proposal for bundling reducers, action types and actions when using Redux - GitHub - erikras/ducks-modular-redux: A proposal for bundling reducers, action types and actions when using Redux

github.com

규칙

하나의 모듈은...

항상 reducer()란 이름의 함수를 export default 해야합니다.
항상 모듈의 action 생성자들을 함수형태로 export 해야합니다.
항상 npm-module-or-app/reducer/ACTION_TYPE 형태의 action 타입을 가져야합니다.
어쩌면 action 타입들을 UPPER_SNAKE_CASE로 export 할 수 있습니다. 만약, 외부 reducer가 해당 action들이 발생하는지 계속 기다리거나, 재사용할 수 있는 라이브러리로 퍼블리싱할 경우에 말이죠.

재사용가능한 Redux 라이브러리 형태로 공유하는 {actionType, action, reducer} 묶음에도 위 규칙을 추천합니다.

// ./redux/modules/todos.js

// 액션 타입 정의
export const ADD_TODO = "redux-start/todos/ADD_TODO";
export const COMPLETE_TODO = "redux-start/todos/COMPLETE_TODO";

// 액션 생성 함수
// {type: ADD_TODO, text: '할일'}
export function addTodo(text) {
  return {
    type: ADD_TODO,
    text,
  };
}
// {type: COMPLETE_TODO, index: 3}
export function completoTodo(index) {
  return {
    type: COMPLETE_TODO,
    index,
  };
}

// 초기값
const initialState = [];

// 리듀서
export default function reducer(previousState = initialState, action) {
  ...
}

// ./redux/modules/filter.js

// 액션 타입 정의
const SHOW_ALL = "redux-start/filter/SHOW_ALL";
const SHOW_COMPLETE = "redux-start/filter/SHOW_COMPLETE";

// 액션 생성 함수
export function showAll() {
  return { type: SHOW_ALL };
}
export function showComplete() {
  return { type: SHOW_COMPLETE };
}

// 초기값
const initialState = "ALL";

// 리듀서
export default function reducer(previousState = initialState, action) {
  ...
}

// ./modules/users.js

import axios from "axios";

// 액션 타입 정의

// 깃헙 API 호출을 시작하는 것을 의미
export const GET_USERS_START = "redux-start/users/GET_USERS_START";

// 깃헙 API 호출에 대한 응답이 성공적으로 돌아온 경우
export const GET_USERS_SUCCESS = "redux-start/users/GET_USERS_SUCCESS";

// 깃헙 API 호출에 대한 응답이 실패한 경우
export const GET_USERS_FAIL = "redux-start/users/GET_USERS_FAIL";

// redux-promise-middleware
const GET_USERS = "redux-start/users/GET_USERS";
export const GET_USERS_PENDING = "redux-start/users/GET_USERS_PENDING";
export const GET_USERS_FULFILLED = "redux-start/users/GET_USERS_FULFILLED";
export const GET_USERS_REJECTED = "redux-start/users/GET_USERS_REJECTED";

// 액션 생성 함수
export function getUsersStart() {
  return {
    type: GET_USERS_START,
  };
}
export function getUsersSuccess(data) {
  return {
    type: GET_USERS_SUCCESS,
    data,
  };
}
export function getUsersFali(error) {
  return {
    type: GET_USERS_FAIL,
    error,
  };
}

// 초기값
const initialState = { loading: false, data: [], error: null };

// 리듀서
export default function reducer(state = initialState, action) {
  ...
}

// react-thunk
export function getUsersThunk() {
  return async (dispatch) => {
    try {
      dispatch(getUsersStart());
      const res = await axios.get("https://api.github.com/users");
      dispatch(getUsersSuccess(res.data));
    } catch (error) {
      dispatch(getUsersFali(error));
    }
  };
}

// redux-promise-middleware
export function getUsersPromise() {
  return {
    type: GET_USERS,
    payload: async () => {
      const res = await axios.get("https://api.github.com/users");
      return res.data;
    },
  };
}

// ./redux/modules/reducer.js

import { combineReducers } from "redux";
import todos from "./todos";
import filter from "./filter";
import users from "./users";

const reducer = combineReducers({
  todos,
  filter,
  users,
});

export default reducer;

🔗 react-router-dom 과 redux 함께 쓰기

https://github.com/supasate/connected-react-router

GitHub - supasate/connected-react-router: A Redux binding for React Router v4

A Redux binding for React Router v4. Contribute to supasate/connected-react-router development by creating an account on GitHub.

github.com

$ npm i react-router-dom

// ./App.js

import "./App.css";
import { BrowserRouter, Route, Router, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Todos from "./pages/Todos";
import Users from "./pages/Users";
import history from "./history";

function App() {
  return (
    <Router history={history}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/todos" element={<Todos />} />
        <Route path="/users" element={<Users />} />
      </Routes>
    </Router>
  );
}

export default App;

// ./pages/Home.jsx

import { Link } from "react-router-dom";

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <ul>
        <li>
          <Link to="/todos">Todos</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </div>
  );
}

// ./pages/Todos.jsx

import TodoListContainer from "../containers/TodoListContainer";
import TodoFormContainer from "../containers/TodoFormContainer";

export default function Todos() {
  return (
    <div>
      <TodoListContainer />
      <TodoFormContainer />
    </div>
  );
}

// ./pages/Users.jsx

import UserListContainer from "../containers/UserListContainer";

export default function Users() {
  return (
    <div>
      <UserListContainer />
    </div>
  );
}

// history.js

import { createBrowserHistory } from "history";

const history = createBrowserHistory();

export default history;

// ./redux/store.js

import { applyMiddleware, createStore } from "redux";
import reducer from "./modules/reducer";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";
import history from "../history";

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(thunk.withExtraArgument({ history }), promise)
  )
);

export default store;

// ./modules/users.js

...

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, ms);
  });
}

// react-thunk
export function getUsersThunk() {
  return async (dispatch, getState, { history }) => {
    try {
      console.log(history);
      dispatch(getUsersStart());
      const res = await axios.get("https://api.github.com/users");
      dispatch(getUsersSuccess(res.data));
      // sleep
      await sleep(2000);
      history.push("/");
    } catch (error) {
      dispatch(getUsersFali(error));
    }
  };
}

// redux-promise-middleware
...
}

강하게 연결

$ npm i connected-react-router

// ./App.js

import "./App.css";
import { BrowserRouter, Route, Router, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Todos from "./pages/Todos";
import Users from "./pages/Users";
import history from "./history";
import { ConnetedRouter } from "connected-react-router";

function App() {
  return (
    <ConnetedRouter history={history}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/todos" element={<Todos />} />
        <Route path="/users" element={<Users />} />
      </Routes>
    </ConnetedRouter>
  );
}

export default App;

// ./redux/reducer.js

import { combineReducers } from "redux";
import todos from "./todos";
import filter from "./filter";
import users from "./users";
import { connectRouter } from "conneted-react-router";
import history from "../../history";

const reducer = combineReducers({
  todos,
  filter,
  users,
  router: connectRouter(history),
});

export default reducer;

// ./redux/store.js

import { applyMiddleware, createStore } from "redux";
import reducer from "./modules/reducer";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";
import history from "../history";
import { routerMiddleware } from "conneted-react-router";

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(
      thunk.withExtraArgument({ history }),
      promise,
      routerMiddleware(history)
    )
  )
);

export default store;

// ./pages/Home.jsx

import { useDispatch } from "react-redux";
import { Link } from "react-router-dom";
import { push } from "connected-react-router";

export default function Home() {
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Home</h1>
      <ul>
        <li>
          <Link to="/todos">Todos</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
      <button onClick={click}>todo 로 이동</button>
    </div>
  );

  function click() {
    dispatch(push("/todos"));
  }
}

🔗 redux-saga : 사이드 이펙트(비동기 로직)를 컨트롤 할 수 있다.

미들웨어 입니다.
제너레이터 객체를 만들어 내는 제네레이터 생성 함수를 이용합니다.
리덕스 사가 미들웨어를 설정하고,
내가 만든 사가 함수를 등록한 후
사가 미들웨어를 실행합니다.
그리고 등록된 사가 함수를 실행할 액션을 디스패치하면 됩니다.

$ npm i redux-saga

// ./redux/modules/users.js

import axios from "axios";
import { call, delay, put, takeEvery } from "redux-saga/effects";
import { push } from "connected-react-router";

...

// redux-saga

const GET_USERS_SAGA_START = "GET_USERS_SAGA_START";

// ⭐ 리덕스 사가 미들웨어를 설정하고,
function* getUsersSaga(action) {
  try {
    yield put(getUsersStart);
    const res = yield call(axios.get, "https://api.github.com/users");
    yield put(getUsersSuccess(res.data));
    // sleep
    yield delay(2000);
    // history.push("/");
    yield put(push("/"));
  } catch (error) {
    yield put(getUsersFali(error));
  }
}

export function getUsersSagaStart() {
  return {
    type: GET_USERS_SAGA_START,
  };
}

// ⭐ 내가 만든 사가 함수를 등록한 후
export function* usersSaga() {
  yield takeEvery(GET_USERS_SAGA_START, getUsersSaga);
}

// ./redux/modules/rootSaga.js

import { all } from "redux-saga/effects";
import { usersSaga } from "./users";

export default function* rootSaga() {
  yield all([usersSaga()]);
}

// ./redux/store.js

import { applyMiddleware, createStore } from "redux";
import reducer from "./modules/reducer";
import { composeWithDevTools } from "redux-devtools-extension";
import thunk from "redux-thunk";
import promise from "redux-promise-middleware";
import history from "../history";
import { routerMiddleware } from "conneted-react-router";
import createSagaMiddleware from "redux-saga";
import rootSaga from "./modules/rootSaga";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(
      thunk.withExtraArgument({ history }),
      promise,
      routerMiddleware(history),
      sagaMiddleware
    )
  )
);

// ⭐ 사가 미들웨어를 실행합니다.
sagaMiddleware.run(rootSaga);

export default store;

// ./containers/UserListContainer.jsx

import { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import UserList from "../components/UserList";
import { getUsersSagaStart, getUsersThunk } from "../redux/modules/users";

export default function UserListContainer() {
  const users = useSelector((state) => state.users.data);
  const dispatch = useDispatch();

  // const getUsers = useCallback(async () => {
  //   try {
  //     dispatch(getUsersStart());
  //     const res = await axios.get("https://api.github.com/users");
  //     dispatch(getUsersSuccess(res.data));
  //   } catch (error) {
  //     dispatch(getUsersFali(error));
  //   }
  // }, [dispatch]);

  // ⭐ 그리고 등록된 사가 함수를 실행할 액션을 디스패치하면 됩니다.
  const getUsers = useCallback(() => {
    dispatch(getUsersSagaStart());
  }, [dispatch]);

  return <UserList users={users} getUsers={getUsers} />;
}

🔗 redux-actions : Ducks Pattern 을 쉽게 구현할 수 있도록 도와주는 라이브러리

https://github.com/redux-utilities/redux-actions

GitHub - redux-utilities/redux-actions: Flux Standard Action utilities for Redux.

Flux Standard Action utilities for Redux. Contribute to redux-utilities/redux-actions development by creating an account on GitHub.

github.com

https://redux-actions.js.org/api

API Reference - redux-actions

redux-actions.js.org

$ npm i redux-actions

import { createActions, handleActions } from "redux-actions";

// 액션 타입 정의 + 액션 생성 함수
export const { showAll, showComplete } = createActions(
  "SHOW_ALL",
  "SHOW_COMPLETE",
  {
    prefix: "redux-start/filter",
  }
);

// 초기값
const initialState = "ALL";

// 리듀서
const reducer = handleActions(
  {
    SHOW_ALL: (state, actions) => "ALL",
    SHOW_COMPLETE: (state, actions) => "COMPLETE",
  },
  initialState,
  { prefix: "redux-start-filter" }
);

export default reducer;

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

45일차 (0)	2022.03.28
43, 44일차 (0)	2022.03.26
41일차 (0)	2022.03.25
useMemo 와 useCallback 은 무엇이 다른 것인가...... (0)	2022.03.25
40일차 (0)	2022.03.24

👩‍💻 Hong Yujin

42일차

🥸

42일차

Part 11. Redux 로 상태관리하기

Ch 2. Redux Advanced (1)

Ch 3. Redux Advanced (2)

Ch 2. Redux Advanced

규칙

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

티스토리툴바

42일차

🥸

42일차

Part 11. Redux 로 상태관리하기

Ch 2. Redux Advanced (1)

Ch 3. Redux Advanced (2)

Ch 2. Redux Advanced

규칙

'💬 > ㅍㅅㅌㅋㅍㅅ 챌린지' 카테고리의 다른 글

'💬/ㅍㅅㅌㅋㅍㅅ 챌린지' Related Articles

티스토리툴바