react, redux, react-redux, redux-persist, redux-saga

[Concepts]

react : UI components

redux : state management

redux-saga :

react-redux : more easy for redux

redux-persist : keep redux store persistantly

src/ds/store/store.js

import storage from "redux-persist/lib/storage";
import { configureStore } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import createSagaMiddleware from "redux-saga";
import rootSaga from "../saga";
import rootReducer from "../reducer";

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const sagaMiddleware = createSagaMiddleware();

function createStore() {
  const store = configureStore({
    reducer: persistedReducer,
    middleware: [sagaMiddleware],
    devTools: true,
  });
  sagaMiddleware.run(rootSaga);
  return store;
}

const store = createStore();
export default store;

src/ds/reducer/index.js

import { combineReducers } from "@reduxjs/toolkit";
import user from "./userSlice";
import config from "./configSlice";
import integration from "./integrationSlice";
import login from "./loginSlice";

const reducer = combineReducers({
  user,
  config,
  integration,
  login,
});

export default reducer;

src/ds/reducer/integrationSlice.js

import { createSlice } from "@reduxjs/toolkit";

export const integrationSlice = createSlice({
  name: "integration",
  initialState: {
    loading: false,
    data: null,
    error: null,
  },
  reducers: {
    dataRequest: (state, action) => {
      state.loading = true;
      state.error = null;
      console.log("integration : dataRequest" + state);
    },
    dataSuccess: (state, action) => {
      state.loading = false;
      state.data = action.payload;
      state.error = false;
      console.log("integration : dataSuccess" + state + action);
    },
    dataFailure: (state, action) => {
      state.loading = false;
      state.error = action.payload;
      // state.error = true;
      console.log("integration : dataRequest" + state + action);
    },
  },
});

// Action creators are generated for each case reducer function
export const integrationActions = integrationSlice.actions;

export default integrationSlice.reducer;

src/ds/saga/integrationSaga.js

import { all, fork, put, call, takeLatest } from "redux-saga/effects";
import { integrationActions } from "../reducer/integrationSlice";
import api from "../api/api";

function* integrationSaga(action) {
  console.log("integration");
  try {
    console.log("before transaction : " + action.payload);
    const result = yield call(api, action.payload);
    console.log("after transaction : " + result);
    yield put(integrationActions.dataSuccess(result));
  } catch (e) {
    console.log("error" + e);
    yield put(integrationActions.dataFailure(e));
  }
}

export function* watchIntegration() {
  // console.log("watch");
  yield takeLatest(integrationActions.dataRequest, integrationSaga);
}

src/ds/api/api.js

import axios from "axios";

function api(params) {
  console.log(params);
  const url = params.url;
  const type = params.type;
  const token = params.token;
  const data = params.data;

  // console.log("token :" + token);

  if (type === "GET") {
    if (token) {
      console.log(type + "token yes");
      const result = axios({
        url: url,
        method: type,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Token " + token,
        },
      }).then((response) => {
        console.log(response.data);
        return response.data;
      });
      return result;
    } else {
      console.log(type + "token no");
      const result = axios({
        url: url,
        method: type,
        headers: {
          "Content-Type": "application/json",
        },
      }).then((response) => {
        console.log(response.data);
        return response.data;
      });
      return result;
    }
  }

  if (type === "POST") {
    if (token) {
      console.log(type + "token yes");
      const result = axios({
        url: url,
        method: type,
        headers: {
          "Content-Type": "application/json",
          Authorization: "Token " + token,
        },
        data: data,
      }).then((response) => {
        console.log(response.data);
        return response.data;
      });
      return result;
    } else {
      console.log(type + "token no");
      const result = axios({
        url: url,
        method: type,
        headers: {
          "Content-Type": "application/json",
        },
        data: data,
      }).then((response) => {
        console.log(response.data);
        return response.data;
      });
      return result;
    }
  }
}

export default api;

src/index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/integration/react";
import store from "./ds/store/store";

let persistor = persistStore(store);

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이 블로그 검색

Dsearch

react, redux, react-redux, redux-persist, redux-saga

댓글

댓글 쓰기