title: Generic Reducers/Actions in React/Redux
body: <p>I am trying to determine how to pull in multiple pieces of data to use in the same component. </p>
  
  <p>Every example I see with React/Redux requests very specific data and has reducers and actions to handle that exact type of data. However, I have not been able to find information about handling more generic data. </p>
  
  <p>For example, I have a few different components (or categories) on my site. One of those components is <code>Cards</code>. So, if a user clicks on the link for <code>/cards/hockey</code> it should request the hockey data from the API (if it isn't in the store already), and display it in the Cards page. If a user clicks the link for <code>/cards/football</code>, it should follow the same procedure, checking to see if it has the data in store yet, if not pulling it from the API, and displaying the Cards page with that data. </p>
  
  <p>Another component type might be <code>stats</code> with stats about different sports teams.</p>
  
  <p>I will not always know what types of cards are available ahead of time, so I cannot hardcode the specific sports types in my application. </p>
  
  <p>So in this case, I'd like to only create two components: cards and stats, but have dynamically loaded data to populate those components.</p>
  
  <p>Right now I have too much repetition going on and it is hard coded. This means that I cannot dynamically add new types in the future without creating new code to handle each of these types.</p>
  
  <p>So, for example, right now I have /actions/footballCardActions.js and /actions/hockeyCardActions.js. I then have /reducers/footballCardReducers.js and /reducers/hockeyCardReducers.js. I might have similar components for the Stats component as well.</p>
  
  <p>I'm also specifying status such as <code>FETCH_HOCKEY_CARDS_SUCCESS</code> or <code>FETCH_FOOTBALL_CARDS_SUCCESS</code>.</p>
  
  <p>Again these are all hard coded, which makes scalability difficult.</p>
  
  <p>One example I am trying to follow is <a href="https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks" rel="noreferrer">https://scotch.io/tutorials/bookshop-with-react-redux-ii-async-requests-with-thunks</a> - but again it uses very specific data requests, rather than generic ones.</p>
  
  <p>What can I do to make my code work more generically so that I do not need to hard code specific datasets. Are there any good tutorials out there that deal with a similar situation?</p>
  
  <p><strong>More clarification</strong></p>
  
  <p>One of my components (screens) is a sports card screen. The menu system (with links) is automatically generated on site load from an API so I do not always know what links are available. So, there may be links for hockey, football, as well as a number of other sports that I have not thought of. When the menu link is clicked, it will call the API for that sport type and display the data on the sports card screen. </p>
  
  <p>Based on the above link (and other similar sites) I've figured out how to hard-code each request for a specific sport in the actions and reducers section, but I have not been able to figure out how to do this generically if I do not know the sports ahead of time.</p>
  
  <p><strong>Further clarification based on current answers</strong></p>
  
  <p>If someone adds a new sport to the API database called MuffiBall, my application needs to be able to handle it. So, I cannot be expected to add new JavaScript code for each new sport that is added to the API. </p>
  
  <p>All sports cards retrieved from the database follow the same structure.</p>
  
  <p><strong>An outline of my current code</strong></p>
  
  <p>index.js</p>
  
  <pre><code>//index.js
  //Other imports here (not shown)
  import Cards from './components/CardsPage'
  import * as cardActions from './actions/cardActions';
  import * as statsActions from './actions/statsActions';
  
  import configureStore from './store/configureStore';
  
  const store = configureStore();
  
  /* Bad place to put these, and currently I am expected to know what every sport is*/
  store.dispatch(hockeyActions.fetchHockey());
  store.dispatch(footballActions.fetchFootball());
  store.dispatch(muffiballActions.fetchMuffiball());
  
  
  render(
    &lt;Provider store={store}&gt;
            &lt;Router&gt;
                  &lt;div&gt;
  
                      /* Navigation menu here (not shown) */
                      /* Currently it is manually coded, */
                      /* but I will be automatically generating it based on API */
  
                        &lt;Route exact path="/" component={Home} /&gt;
                        &lt;Route path="/about" component={About} /&gt;
                        &lt;Route path="/cards/:val" component={Cards} /&gt;
                        &lt;Route path="/stats/:val" component={Stats} /&gt;
                  &lt;/div&gt;
            &lt;/Router&gt;
    &lt;/Provider&gt;,
    document.getElementById('app')
  );
  </code></pre>
  
  <p>store/configureStore.js</p>
  
  <pre><code>// store/configureStore.js
  import {createStore, compose, applyMiddleware} from 'redux';
  // Import thunk middleware
  import thunk from 'redux-thunk';
  import rootReducer from '../reducers';
  
  export default function configureStore(initialState) {
    return createStore(rootReducer, initialState,
      // Apply to store
      applyMiddleware(thunk)
    );
  }
  </code></pre>
  
  <p>actions/actionTypes</p>
  
  <pre><code>// actions/actionTypes
  
  export const FETCH_HOCKEY_SUCCESS = 'FETCH_HOCKEY_SUCCESS';
  export const FETCH_FOOTBALL_SUCCESS = 'FETCH_FOOTBALL_SUCCESS';
  export const FETCH_MUFFIBALL_SUCCESS = 'FETCH_MUFFIBALL_SUCCESS';
  </code></pre>
  
  <p>actions/hockeyActions.js (one such file for every sport - need to make this one generic file):</p>
  
  <pre><code>// hockeyActions.js (one such file for every sport - need to make this one generic file):
  
  import Axios from 'axios';
  
  const apiUrl = '/api/hockey/';
  // Sync Action
  export const fetchHockeySuccess = (hockey) =&gt; {
    return {
      type: 'FETCH_HOCKEY_SUCCESS',
      hockey
    }
  };
  
  
  //Async Action
  export const fetchHockey = () =&gt; {
    // Returns a dispatcher function
    // that dispatches an action at a later time
    return (dispatch) =&gt; {
      // Returns a promise
      return Axios.get(apiUrl)
        .then(response =&gt; {
          // Dispatch another action
          // to consume data
  
          dispatch(fetchHockeySuccess(response.data))
        })
        .catch(error =&gt; {
          console.log(error)
          throw(error);
        });
    };
  };
  </code></pre>
  
  <p>reducers/hockeyReducers.js (one such file for every sport - need to make this one generic file)</p>
  
  <pre><code>// reducers/hockeyReducers.js (one such file for every sport - need to make this one generic file)
  
  import * as actionTypes from '../actions/actionTypes'
  
  export const hockeyReducer = (state = [], action) =&gt; {
    switch (action.type) {
      case actionTypes.FETCH_HOCKEY_SUCCESS:
            return action.hockey;
      default:
            return state;
    }
  };
  </code></pre>
  
  <p>reducers/index.js</p>
  
  <pre><code>// reducers/index.js
  
  import { combineReducers } from 'redux';
  import {hockeyReducer} from './hockeyReducers'
  import {footballReducer} from './footballReducers'
  import {muffiballReducer} from './muffiballReducers'
  
  export default combineReducers({
    hockey: hockeyReducer,
    football: footballReducer,
    muffiball: muffiballReducer,
    // More reducers for each sport here
  });
  </code></pre>
  
  <p>components/CardsPage.js:</p>
  
  <pre><code>//components/CardsPage.js
  
  import React from 'react';
  import { connect } from 'react-redux';
  
  class Cards extends React.Component{
    constructor(props){
      super(props);
  
      this.state = {
          data: this.props.data,
      }
  
    }
  
    componentWillReceiveProps(nextProps){
          this.setState({
                  data: nextProps.data,
          })
    }
  
    render(){
  
      return(
          {/* cards displayed from this.state.data */}
      )
    }
  }
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
      data: state[ownProps.match.params.val]
    }
  };
  
  export default connect(mapStateToProps)(Cards);
  </code></pre>