title: React reducer giving error
body: <p>I have a file where lies my redux actions and reducers. I calling action from one of my components but I am getting an error saying </p>
  
  <pre><code>Error: Given action "GLOBAL_TRIVIA_TAB_CHANGED", reducer "TriviaReducer" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.
  </code></pre>
  
  <p>This is my file where my actions and reducers lies</p>
  
  <pre><code>const INITIAL_STATE = {
      selectedGlobalTriviaTab: 1,
      selectedLocalTriviaTab: 1
  }
  
  const GLOBAL_TRIVIA_TAB_CHANGED = 'GLOBAL_TRIVIA_TAB_CHANGED'
  const globalTriviaTabChanged = (tab)=&gt; ({
      type: GLOBAL_TRIVIA_TAB_CHANGED,
      payload: tab
  })
  
  const LOCAL_TRIVIA_TAB_CHANGED = 'LOCAL_TRIVIA_TAB_CHANGED'
  const localTriviaTabChanged = (tab)=&gt; ({
      type: LOCAL_TRIVIA_TAB_CHANGED,
      payload: tab
  })
  
  
  export const actions = {
      globalTriviaTabChanged,
      localTriviaTabChanged
  }
  
  
  
  export default function TriviaReducer(state = INITIAL_STATE, action){
      switch(action.type){
          case GLOBAL_TRIVIA_TAB_CHANGED:
              state = {...state, selectedGlobalTriviaTab : action.payload};
              break;
          case LOCAL_TRIVIA_TAB_CHANGED:
              state = {...state, selectedLocalTriviaTab: action.payload};
              break;
          default:
              return state
      }
  }
  </code></pre>
  
  <p>I am calling actions from my component render method</p>
  
  <pre><code>import {actions} from "../../store/Trivia";
  
  class TriviaPanel extends Component {
  
      state = {
          selectedGlobalTriviaTab: 1
      }
  
      toMovies(){
          this.setState({selectedGlobalTriviaTab: 1})
      }
      toPerson(){
          this.setState({selectedGlobalTriviaTab: 2})
      }
      toLocation(){
          this.setState({selectedGlobalTriviaTab: 3})
      }
  
      render() {
          let TabComponent;
  
          if(this.state.selectedGlobalTriviaTab === 1){
              TabComponent = &lt;Movies/&gt;
              this.props.globalTriviaTabChanged(1)   //calling redux-action
          }
          else if(this.state.selectedGlobalTriviaTab === 2){
              TabComponent = &lt;Person/&gt;
            //this.globalTriviaTabChanged(2)    //calling redux-action
          }
  
          return (
              &lt;div className="tabbed-panel"&gt;
                  &lt;div className="tabs"&gt;
                      &lt;div className={`tab ${this.state.selectedGlobalTriviaTab === 1? "active" : ""}`} onClick={this.toMovies.bind(this)}&gt;&lt;div className="tab-inner"&gt;MOVIES&lt;/div&gt;&lt;/div&gt;
                      &lt;div className={`tab ${this.state.selectedGlobalTriviaTab === 2? "active" : ""}`} onClick={this.toPerson.bind(this)}&gt;&lt;div className="tab-inner"&gt;PERSON&lt;/div&gt;&lt;/div&gt;
                      &lt;div className={`tab ${this.state.selectedGlobalTriviaTab === 3? "active" : ""}`} onClick={this.toLocation.bind(this)}&gt;&lt;div className="tab-inner"&gt;LOCATION&lt;/div&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  {TabComponent}
              &lt;/div&gt;
          );
      }
  }
  
  const mapDispatchToProps = (dispatch)=&gt; ({
      globalTriviaTabChanged(value){
          return dispatch(actions.globalTriviaTabChanged(value))
      },
      localTriviaTabChanged(value){
          return dispatch(actions.localTriviaTabChanged(value))
      }
  })
  
  export default connect(null, mapDispatchToProps)(TriviaPanel)
  </code></pre>
  
  <p>Here is screen capture of errror</p>
  
  <p><a href="https://i.stack.imgur.com/AUp04.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AUp04.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong? Am I required to include anything else in reducer?</p>