refactoring redux

react-app/src/App.js

@@ -1,21 +1,17 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
-import { store } from "./actions/store";
-import { Provider } from "react-redux";
 import DCandidates from './components/DCandidates';
 import { Container } from "@material-ui/core";
 import { ToastProvider } from "react-toast-notifications";
 
 function App() {
   return (
-    <Provider store={store}>
-      <ToastProvider autoDismiss={true}>
-        <Container maxWidth="lg">
-          <DCandidates />
-        </Container>
-      </ToastProvider>
-    </Provider>
+    <ToastProvider autoDismiss={true}>
+      <Container maxWidth="lg">
+        <DCandidates />
+      </Container>
+    </ToastProvider>
   );
 }
 

react-app/src/components/DCandidateForm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { Grid, TextField, withStyles, FormControl, InputLabel, Select, MenuItem, Button, FormHelperText } from "@material-ui/core";
 import useForm from "./useForm";
 import { connect } from "react-redux";
-import * as actions from "../actions/dCandidate";
+import * as actions from "../store/actions";
 import { useToasts } from "react-toast-notifications";
 
 const styles = theme => ({

react-app/src/components/DCandidates.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { connect } from "react-redux";
-import * as actions from "../actions/dCandidate";
+import * as actions from "../store/actions";
 import { Grid, Paper, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, withStyles, ButtonGroup, Button } from "@material-ui/core";
 import DCandidateForm from "./DCandidateForm";
 import EditIcon from "@material-ui/icons/Edit";
@@ -27,13 +27,13 @@ const DCandidates = ({ classes, ...props }) => {
     useEffect(() => {
         props.fetchAllDCandidates()
     }, [])//componentDidMount
-    
+
     //toast msg.
     const { addToast } = useToasts()
 
     const onDelete = id => {
         if (window.confirm('Are you sure to delete this record?'))
-            props.deleteDCandidate(id,()=>addToast("Deleted successfully", { appearance: 'info' }))
+            props.deleteDCandidate(id, () => addToast("Deleted successfully", { appearance: 'info' }))
     }
     return (
         <Paper className={classes.paper} elevation={3}>

react-app/src/index.js

@@ -1,10 +1,28 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware, combineReducers } from 'redux';
+import thunk from 'redux-thunk';
+
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import dCandidateReducer from './store/reducers/dCandidate';
+
+const rootReducer = combineReducers({
+    dCandidate: dCandidateReducer
+});
+
+const store = createStore(rootReducer, applyMiddleware(thunk));
+
+const app = (
+    <Provider store={store}>
+        <App />
+    </Provider>
+)
+
+ReactDOM.render(app, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

react-app/src/store/actions/actionTypes.js

@@ -0,0 +1,5 @@
+
+export const CREATE = 'CREATE';
+export const UPDATE = 'UPDATE';
+export const DELETE = 'DELETE';
+export const FETCH_ALL = 'FETCH_ALL';

react-app/src/actions/dCandidate.js → react-app/src/store/actions/dCandidate.js

@@ -1,13 +1,9 @@
-import api from "./api";
+import * as actionTypes from './actionTypes';
+
+import api from '../api';
 
-export const ACTION_TYPES = {
-    CREATE: 'CREATE',
-    UPDATE: 'UPDATE',
-    DELETE: 'DELETE',
-    FETCH_ALL: 'FETCH_ALL'
-}
 
-const formateData = data => ({
+const formatData = data => ({
     ...data,
     age: parseInt(data.age ? data.age : 0)
 })
@@ -16,19 +12,19 @@ export const fetchAll = () => dispatch => {
     api.dCandidate().fetchAll()
         .then(response => {
             dispatch({
-                type: ACTION_TYPES.FETCH_ALL,
+                type: actionTypes.FETCH_ALL,
                 payload: response.data
-            })
+            });
         })
-        .catch(err => console.log(err))
-}
+        .catch(err => console.log(err));
+};
 
 export const create = (data, onSuccess) => dispatch => {
-    data = formateData(data)
+    data = formatData(data)
     api.dCandidate().create(data)
         .then(res => {
             dispatch({
-                type: ACTION_TYPES.CREATE,
+                type: actionTypes.CREATE,
                 payload: res.data
             })
             onSuccess()
@@ -37,11 +33,11 @@ export const create = (data, onSuccess) => dispatch => {
 }
 
 export const update = (id, data, onSuccess) => dispatch => {
-    data = formateData(data)
+    data = formatData(data)
     api.dCandidate().update(id, data)
         .then(res => {
             dispatch({
-                type: ACTION_TYPES.UPDATE,
+                type: actionTypes.UPDATE,
                 payload: { id, ...data }
             })
             onSuccess()
@@ -53,7 +49,7 @@ export const Delete = (id, onSuccess) => dispatch => {
     api.dCandidate().delete(id)
         .then(res => {
             dispatch({
-                type: ACTION_TYPES.DELETE,
+                type: actionTypes.DELETE,
                 payload: id
             })
             onSuccess()

react-app/src/store/actions/index.js

@@ -0,0 +1,6 @@
+export {
+    fetchAll,
+    create,
+    update,
+    Delete
+} from './dCandidate'

react-app/src/store/reducers/dCandidate.js

@@ -0,0 +1,38 @@
+import * as actionTypes from '../actions/actionTypes';
+
+const initialState = {
+    list: []
+}
+
+const dCandidate = (state = initialState, action) => {
+    switch (action.type) {
+        case actionTypes.FETCH_ALL:
+            return {
+                ...state,
+                list: [...action.payload]
+            }
+
+        case actionTypes.CREATE:
+            return {
+                ...state,
+                list: [...state.list, ...action.payload]
+            }
+
+        case actionTypes.UPDATE:
+            return {
+                ...state,
+                list: state.list.map(x => x.id === action.payload.id ? action.payload : x)
+            }
+
+        case actionTypes.DELETE:
+            return {
+                ...state,
+                list: state.list.filter(x => x.id !== action.payload)
+            }
+
+        default:
+            return state;
+    }
+}
+
+export default dCandidate;