amol-c

// fetchDataEpic.js
import { Epic } from 'redux-observable';
import { from, of } from 'rxjs';
import {  switchMap, catchError, filter } from 'rxjs/operators';
import {FETCH_DATA} from '../actionTypes'
import {fetchDataSuccess, fetchDataError} from '../actions'

const fetchDataEpic: Epic = (action$) =>
{
  return action$.pipe(

amol-c

// fetchDataReducer.js
import { FETCH_DATA_SUCCESS } from "../actionTypes"

const fetchDataReducer = (state = {}, action) => {
  switch (action.type) {
  case FETCH_DATA_SUCCESS:
    const data = action.payload
    return {…state, …data}
    
    default:

amol-c

// fetchDataEpic.js
import { Epic } from 'redux-observable';
import { from, of } from 'rxjs';
import { switchMap, catchError, filter } from 'rxjs/operators';
import { FETCH_DATA } from '../actionTypes'
import { fetchDataSuccess, fetchDataError } from '../actions'

const fetchDataEpic: Epic = (action$) => {
  return action$.pipe(
    filter(action => {

amol-c

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers'
import rootEpic from './epics'
import { createEpicMiddleware } from 'redux-observable';

const epicMiddleware = createEpicMiddleware();
const middlewares = [epicMiddleware];
const enhancer = composeWithDevTools(applyMiddleware(…middlewares));
const store = createStore(rootReducer, enhancer);

amol-c

import React from "react";
import { connect } from "react-redux";
import { fetchData } from "../redux/actions";

const mapStateToProps = (state) => ({
  giphyData: state.fetchDataReducer
});

const mapDispatchToProps = {
  fetchData: fetchData

amol-c

// fetchDataReducer.js
import {FETCH_DATA} from "../actionTypes"

// update dummyData from the output of
// curl - request GET - url 'http://api.giphy.com/v1/gifs/search?offset=0&limit=2&q=nice%20images&api_key=dc6zaTOxFJmzC' - data '{}'
const dummyData = '{"data":[{"type":"...'
const fetchDataReducer = (state = {}, action) => {
switch (action.type) {
  case FETCH_DATA:
  const data = JSON.parse(dummyData)

amol-c

// fetchDataReducer.js
const fetchDataReducer = (state = {}, action) => {
  return state
}

export default fetchDataReducer

amol-c

import { createStore } from "redux";
import { devToolsEnhancer } from 'redux-devtools-extension';
import rootReducer from './reducers'
export default createStore(rootReducer, devToolsEnhancer());

amol-c

// ./src/redux/reducers/index.js
import { combineReducers } from "redux";
import fetchDataReducer from "./fetchDataReducer";

const rootReducer = combineReducers({ fetchDataReducer });

export default rootReducer

amol-c

import React from "react";
import { connect } from "react-redux";
import { fetchData } from "../redux/actions";

const mapDispatchToProps = {
  fetchData: fetchData
};

class GiphyView extends React.Component {
  componentDidMount() {