title: React Redux Reducer: 'this.props.tasks.map is not a function' error
body: <p>I am making a React Redux example; however, I ran into an issue and get the error below:</p>
  
  <blockquote>
    <p>TypeError: this.props.tasks.map is not a function
    [Learn More]</p>
  </blockquote>
  
  <p>I have tried many things and I cannot seem to understand why this is not working. I believe it is when the allReducers maps the tasks from the Tasks function. I have fixed this error back and forth but then it would complain it was undefined. I would fix that and loop back to this issue. Any help would be appreciated. Im sure I am making a simple mistake. Below are my following files</p>
  
  <p><strong>App.js</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import TaskBoard from "../containers/task-board";
  require('../../scss/style.scss');
  
  const App = () =&gt; (
      &lt;div&gt;
          &lt;h2&gt;Task List&lt;/h2&gt;
          &lt;hr /&gt;
          &lt;TaskBoard/&gt;
      &lt;/div&gt;
  );
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>index.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    import {combineReducers} from 'redux';
      import {Tasks} from './reducer-tasks';
      const allReducers = combineReducers({
          tasks: Tasks
      });
  
      export default allReducers</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>task-board.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    import React, {Component} from 'react';
      import {bindActionCreators} from 'redux';
      import {connect} from 'react-redux';
      import {deleteTaskAction} from '../actions/ActionIndex';
      import {editTaskAction} from '../actions/ActionIndex';
      class TaskBoard extends Component {
          renderList() {
              return this.props.tasks.map((task) =&gt; {
                  if(task.status == "pending"){
                      return (&lt;li key={task.id}&gt;
                          {task.id} {task.description}
                          &lt;button type="button"&gt;Finish&lt;/button&gt;
                          &lt;button type="button"&gt;Edit&lt;/button&gt;
                          &lt;button onClick={() =&gt; this.props.deleteTask(task)} type="button"&gt;Delete&lt;/button&gt;
                      &lt;/li&gt;
                  );
              }
          });
      }
      render() {
          if (!this.props.tasks) {
              console.log(this.props.tasks);
              return (&lt;div&gt;You currently have no tasks, please first create one...&lt;/div&gt;);
          }
          return (
              &lt;div&gt;
                  {this.renderList()}
              &lt;/div&gt;
          );
      }
  }
      function mapStateToProps(state) {
          return {
              tasks: state.tasks
          };
      }
      function matchDispatchToProps(dispatch){
          return bindActionCreators(
          {
              deleteTask: deleteTaskAction,
              editTask: editTaskAction
          }, dispatch)
      }
      export default connect(mapStateToProps,matchDispatchToProps)(TaskBoard);</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>reducer-tasks.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const initialState = {
   tasks: [
          {
              id: 1,
              description: "This is a task",
              status: "pending"
          },
          {
              id: 2,
              description: "This is another task",
              status: "pending"
          },
          {
              id: 3,
              description: "This is an easy task",
              status: "pending" 
  
          }
   ]
  }
  
  export function Tasks (state = initialState, action) {
      switch (action.type) {
          case 'ADD_TASK':
              return Object.assign({}, state, {
               tasks: [
                ...state.tasks,
                {
                 description: action.text,
                 status: action.status
                }
               ]
              })
              break;
  
          case 'EDIT_TASK':
              return action.payload;
              break;
  
          case 'DELETE_TASK':
              return Object.assign({}, state, {
               status: action.status
              })
              break;
      }
  
      return state;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>actionindex.js</strong>
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    export const addTaskAction = (task) =&gt; {
          return {
              type: 'ADD_TASK',
              text: "Here is a sample description",
              status: "pending"
          }
      };
      export const deleteTaskAction = (task) =&gt; {
          return {
              type: 'DELETE_TASK',
              status: "deleted"
          }
      };
      export const editTaskAction = (task) =&gt; {
          return {
              type: 'EDIT_TASK',
              payload: task
          }
      };</code></pre>
  </div>
  </div>
  </p>