Set up REDUX-SAGA middleware for React App | Part 1 | Reduxsauce | Full codebase

I presume that you already gone through the docs of redux-saga, reduxsauce ,so that I won't waste your time with lots of description. Let's start coding

Init react app :

npx create-react-app redux-saga-starter

First we need to install the dependencies :

npm i --save redux react-redux remote-redux-devtools redux-saga redux-logger reduxsauce seamless-immutable

Install react router dependency for required routes :

npm i react-router-dom --save

So before adding redux/redux-saga my initial index.js , App.js and Router.js are as following :

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Router.js

import React, {Component} from 'react'

import { Route,Switch } from 'react-router-dom'

import Home from './Components/Home/home'

class Routes extends Component{

render(){

return(

<Switch>

<Route path="/" exact component={Home} />

</Switch>

)

}

}

export default Routes;

App.js

import React from 'react';

import { BrowserRouter } from 'react-router-dom'

import Routes from './Router'

const App = () =>{

return (

<BrowserRouter>

<Routes />

</BrowserRouter>

);

}

export default App;

I have also created a Home component for a landing container :

Home.js

import React, { Component } from 'react'

class Home extends Component {

render() {

return (

<div>

Home

</div>

)

}

}

export default Home;

Now my initial setup is done, if I start the server via 'npm start' command now, it works fine

Now we have to create RootReducer and RootSaga, I am creating them as Reducers/index.js and Sagas/index.js :

Reducers/index.js :

import { combineReducers } from 'redux'

import { reducer as getPostList } from './postListReducer'

const rootReducer = (state,action) => {

return appReducer(state,action);

}

const appReducer = combineReducers({

getPostList

})

export default rootReducer;

Well here we have added postListReducer but did not create that yet, let's create that one

Reducers/postListReducer.js :

import { createReducer,createActions } from 'reduxsauce'

import Immutable from 'seamless-immutable'

const { Types,Creators } = createActions({

addMarker:['data'],

addMarkerSuccess:['data'],

addMarkerFailure:null

});

export const AddMarkerTypes = Types;

export default Creators;

export const INITIAL_STATE = Immutable({

fetching:null,

error:null,

CreatedData:null

});

const addMarker = state => {

return{

...state,

CreatedData:null,

fetching:true,

error:false

}

};

const addMarkerSuccess = (state,action) => {

return{

...state,

fetching:false,

CreatedData:action,

error:false

}

}

const addMarkerFailure = state => {

return{

...state,

fetching:false,

error:true,

CreatedData:null

}

}

export const reducer = createReducer(INITIAL_STATE,{

[Types.ADD_MARKER]:addMarker,

[Types.ADD_MARKER_SUCCESS]:addMarkerSuccess,

[Types.ADD_MARKER_FAILURE]:addMarkerFailure

})

Continue to Part 2