#69 Making redux section of this project more robust, scalable and nice way to handle asynchronous activity
Closed 2 years ago by lbrabec. Opened 2 years ago by kunalprakash1309.
fedora-qa/ kunalprakash1309/landingpage redux-thunk  into  master

@@ -1,43 +0,0 @@ 

- import ActionTypes from '../constants';

- 

- export const loadDataResp = payload => ({

-     type: ActionTypes.LOAD_DATA_RESP,

-     payload: payload

- })

- 

- export const loadData = payload => dispatch => {

-     dispatch({

-         type: ActionTypes.LOAD_DATA,

-         payload: payload

-     });

- 

-     fetch(window.env.ORACULUM_API_URL_v1 + "landing_page")

-     .then(blob => blob.json())

-     .then(data => {

-         dispatch(loadDataResp(data))

-     })

-     .catch((error) => {

-         console.error('Error:', error);

-     });

- }

- 

- export const loadWizardDataResp = payload => ({

-     type: ActionTypes.LOAD_WIZARD_DATA_RESP,

-     payload: payload

- })

- 

- export const loadWizardData = payload => dispatch => {

-     dispatch({

-         type: ActionTypes.LOAD_WIZARD_DATA,

-         payload: payload

-     });

- 

-     fetch(window.env.ORACULUM_API_URL_v1 + "actions/all")

-     .then(blob => blob.json())

-     .then(data => {

-         dispatch(loadWizardDataResp(data))

-     })

-     .catch((error) => {

-         console.error('Error:', error);

-     });

- }

file removed
-6
@@ -1,6 +0,0 @@ 

- export default {

-     LOAD_DATA: 'LOAD_DATA',

-     LOAD_DATA_RESP: 'LOAD_DATA_RESP',

-     LOAD_WIZARD_DATA: 'LOAD_WIZARD_DATA',

-     LOAD_WIZARD_DATA_RESP: 'LOAD_WIZARD_DATA_RESP',

- }

file modified
+2 -2
@@ -13,10 +13,10 @@ 

  import thunkMiddleware from 'redux-thunk'

  import { createLogger } from 'redux-logger'

  import { Provider } from 'react-redux'

- import reducer from './reducers'

+ import rootReducer from './redux/rootReducer'

  

  const loggerMiddleware = createLogger();

- const store = createStore(reducer, applyMiddleware(

+ const store = createStore(rootReducer, applyMiddleware(

    thunkMiddleware,

    loggerMiddleware

  ));

@@ -11,7 +11,7 @@ 

  import _ from "lodash"

  

  import { connect } from "react-redux"

- import { loadData } from "../actions/reduxActions"

+ import { loadData } from "../redux/landinpage/action"

  

  import Cookies from "universal-cookie"

  

@@ -0,0 +1,27 @@ 

+ import ActionTypes from './constants'

+ 

+ export const fetchDataStart = () => ({

+   type: ActionTypes.LOAD_DATA_START

+ })

+ 

+ export const fetchDataSuccess = (payload) => ({

+   type: ActionTypes.LOAD_DATA_SUCCESS,

+   payload: payload

+ })

+ 

+ export const fetchDataFail = (errorMessage) => ({

+   type: ActionTypes.LOAD_DATA_FAILURE,

+   payload: errorMessage

+ })

+ 

+ export const loadData = () => {

+   return dispatch => {

+       dispatch(fetchDataStart())

+ 

+       fetch(window.env.ORACULUM_API_URL_v1 + "landing_page")

+       .then(blob => blob.json())

+       .then(data => {

+           dispatch(fetchDataSuccess(data))

+       }).catch(error => dispatch(fetchDataFail(error.message)))

+   }

+ } 

\ No newline at end of file

@@ -0,0 +1,5 @@ 

+ export default {

+   LOAD_DATA_START: 'LOAD_DATA_START',

+   LOAD_DATA_SUCCESS: 'LOAD_DATA_SUCCESS',

+   LOAD_DATA_FAILURE: 'LOAD_DATA_FAILURE',

+ } 

\ No newline at end of file

src/redux/landinpage/index.js src/reducers/index.js
file renamed
+25 -27
@@ -1,44 +1,42 @@ 

- import ActionTypes from "../constants"

+ import ActionTypes from "./constants"

  

  const defaultState = {

-   landing_page: {

-     blockerbugs: {},

-     devel: 0,

-     meetings: [],

-     schedule: [],

-     last_qa_meeting: {},

-     stable: 0,

-     config_mode: false,

-     enabled_components: ["events", "blockers", "minutes"],

-   },

-   wizard: {

-     actions: [],

-     providers: [],

-     all_actions: [],

-   },

+   blockerbugs: {},

+   devel: 0,

+   meetings: [],

+   schedule: [],

+   last_qa_meeting: {},

+   stable: 0,

+   config_mode: false,

+   enabled_components: ["events", "blockers", "minutes"],

+   errorMessage: "",

  }

  

- export default (state = defaultState, action) => {

+ const LandingPageReducer = (state = defaultState, action) => {

    switch (action.type) {

-     case ActionTypes.LOAD_DATA_RESP:

+ 

+     case ActionTypes.LOAD_DATA_START:

        return {

          ...state,

-         landing_page: action.payload,

        }

- 

-     case ActionTypes.LOAD_WIZARD_DATA_RESP:

+       

+     case ActionTypes.LOAD_DATA_SUCCESS:

        return {

          ...state,

-         wizard: {

-           ...state.wizard,

-           providers: action.payload.providers,

-           all_actions: action.payload.actions,

-         },

+         ...action.payload

        }

  

-     default:

+     case ActionTypes.LOAD_DATA_FAILURE:

        return {

          ...state,

+         errorMessage: action.payload

+     }

+ 

+     default :

+       return {

+         ...state

        }

    }

  }

+ 

+ export default LandingPageReducer 

\ No newline at end of file

@@ -0,0 +1,11 @@ 

+ import { combineReducers } from "redux"

+ 

+ import LandingPageReducer from "./landinpage/index"

+ import WizardReducer from "./wizard/index"

+ 

+ const rootReducer = combineReducers({

+   landing_page: LandingPageReducer,

+   wizard: WizardReducer

+ })

+ 

+ export default rootReducer 

\ No newline at end of file

@@ -0,0 +1,28 @@ 

+ import ActionTypes from './constants'

+ 

+ export const fetchWizardDataStart = () => ({

+   type: ActionTypes.LOAD_WIZARD_DATA_START

+ })

+ 

+ export const fetchWizardDataSuccess = (payload) => ({

+   type: ActionTypes.LOAD_WIZARD_DATA_SUCCESS,

+   payload: payload

+ })

+ 

+ export const fetchWizardDataFail = (errorMessage) => ({

+   type: ActionTypes.LOAD_WIZARD_DATA_FAIL,

+   payload: errorMessage

+ })

+ 

+ export const loadWizardData = () => {

+   return dispatch => {

+     dispatch(fetchWizardDataStart())

+ 

+     fetch(window.env.ORACULUM_API_URL_v1 + "actions/all")

+     .then(blob => blob.json())

+     .then(data => {

+       dispatch(fetchWizardDataSuccess(data))

+     })

+     .catch(error => dispatch(fetchWizardDataFail(error.message)))

+   }

+ } 

\ No newline at end of file

@@ -0,0 +1,5 @@ 

+ export default {

+   LOAD_WIZARD_DATA_START: 'LOAD_WIZARD_DATA_START',

+   LOAD_WIZARD_DATA_SUCCESS: 'LOAD_WIZARD_DATA_SUCCESS',

+   LOAD_WIZARD_DATA_FAIL: 'LOAD_WIZARD_DATA_FAIL',

+ } 

\ No newline at end of file

@@ -0,0 +1,38 @@ 

+ import ActionTypes from './constants'

+ 

+ const defaultState = {

+   actions: [],

+   providers: [],

+   all_actions: [],

+   errorMessage: "",

+ }

+ 

+ const WizardReducer = (state = defaultState, action) => {

+   switch (action.type) {

+ 

+     case ActionTypes.LOAD_WIZARD_DATA_START:

+       return {

+         ...state,

+       }

+ 

+     case ActionTypes.LOAD_WIZARD_DATA_SUCCESS:

+       return {

+         ...state,

+         providers: action.payload.providers,

+         all_actions: action.payload.actions,

+       }

+ 

+     case ActionTypes.LOAD_WIZARD_DATA_FAIL:

+       return {

+         ...state,

+         errorMessage: action.payload

+       }

+ 

+     default:

+       return {

+         ...state,

+       }

+   }

+ }

+ 

+ export default WizardReducer 

\ No newline at end of file

file modified
+9 -10
@@ -1,12 +1,11 @@ 

  import React, { Component } from "react"

  import WizardForm from "./WizardForm"

  import Layout from "../layout/Layout"

- import { oraculumApiUrl_v1 } from "../config"

  import Actions from "./Actions"

  import { Container, Row } from "reactstrap"

  

  import { connect } from "react-redux"

- import { loadWizardData } from "../actions/reduxActions"

+ import { loadWizardData } from "../redux/wizard/action"

  

  class Wizard extends Component {

    constructor(props) {
@@ -17,14 +16,14 @@ 

    }

  

    componentDidMount() {

-     fetch(oraculumApiUrl_v1 + "actions/all")

-       .then((resp) => resp.json())

-       .then((data) => {

-         this.setState({

-           providers: data.providers,

-           all_actions: data.actions,

-         })

-       })

+     // fetch(oraculumApiUrl_v1 + "actions/all")

+     //   .then((resp) => resp.json())

+     //   .then((data) => {

+     //     this.setState({

+     //       providers: data.providers,

+     //       all_actions: data.actions,

+     //     })

+     //   })

  

      this.props.dispatch(loadWizardData())

    }

This PR helps to handle asynchronous activity in better way. It is also scalable if you want to use more reducers.
It also fixes the folder structure.

1 new commit added

  • Used combineReducer to combine multiple reducer and made redux folder for respective LandingPage and Wizard
2 years ago

rebased onto 55e0dd5

2 years ago

Thanks for participating in contribution period of Outreachy. This pull-request has not been selected to be merged and will be closed for housecleaning purposes. We may revisit this pull-request later, but as of now we will focus on merging pull-requests from our accepted intern.

Pull-Request has been closed by lbrabec

2 years ago