title: redux-saga used with redux causes render() to be called twice
body: <p>I have a problem while incorporating the redux saga in my application .
  What I understand from the tutorials is that the middleware will parse the action dispatched from the app and will process some async operations(asycn storage, api). </p>
  
  <p>Then put another action in the pipeline which will trigget the reducer and then updates the state.</p>
  
  <p>Flow is that my component button click triggers an action dispatch which is caught by the watcher in the saga, and then api calls are processed then the put is done to send data to reducer to update the state.</p>
  
  <p>If in my component I dispatch the action FETCH_DATA, the saga is catching that and processing the data fetch and then calling the updateprofile. This calls the reducer and processing happens. </p>
  
  <p>This is what I expected. But even before hitting the saga FETCH_DATA, the call comes to the reducer and since there is no action type FETCH_DATA case to handle it will return the default state and thiscauses the app to re render. So rendering happens twice and it is causing some problem to my items in the list. </p>
  
  <p>I think this is also somewhat expected as I read in some article .How to get rid of this re rendering ?</p>
  
  <pre><code>function* datafetch(action) {
   let { data } = yield call(loginApi, action.payload);
    yield put(updateProfile(data.profile));
  }
  
  export function* dataFetcherSaga() {
    yield takeLatest('FETCH_DATA', datafetch);
  }
  
  /reducer.js
  const toDoListReducer = (state, action) =&gt; {
    switch (action.type) {
      case "UPDATE_APPREDUX_STATE":
        return {
          //some processing with data and state
        };
        break;
      case "UPDATE_PROFILE":
        return {
          //some processing with data and state
        };
        break;
  
      default:
        return state;
    }
  
    return state;
  };
  export default toDoListReducer;
  
  
  
  //action
  export const fetchData = currentDay =&gt; {
    return {
      type: 'FETCH_DATA',
      currentDay: currentDay
    };
  };
  
  export function updateProfile(profile) {
    return { type: 'UPDATE_PROFILE', payload: authParams };
  }
  </code></pre>
  
  <p>//component</p>
  
  <pre><code>render(){
  return (
    &lt;View style={styles.viewStyle}&gt;
  
        &lt;SafeAreaView&gt;
          &lt;View style={styles.viewPadding}&gt;
            &lt;View&gt;
              &lt;View style={styles.toDoViewStyle}&gt;
                &lt;TextInput
                  style={styles.toDoInputStyle}
                  placeholder="What you gonna do ?"
                  onChangeText={text =&gt; {
                    this.newTask = text;
                  }}
                /&gt;
                &lt;TouchableOpacity
                  onPress={() =&gt; {
                    this.props.updateTasks(
                      {
                        taskID: new Date().getTime(),
                        taskDay: this.currentDay, //millisecond field to get a unique value
                        taskValue: this.newTask,
                        taskCompleted: false,
                        taskCompletedTime: null
                      },
                      "addTask"
                    );
                  }}
                &gt;
                  &lt;Image
                    style={styles.addImage}
                    source={require("../../assets/add.png")}
                  /&gt;
                &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
              &lt;Text&gt;
  
  
                ↓ To Do Items ↓
              &lt;/Text&gt;
              &lt;SectionList
                style={styles.flatListStyle}
                renderItem={({ item }) =&gt; &lt;ToDoListItem value={item} /&gt;}
                renderSectionHeader={({ section: { title, data } }) =&gt; {
                  if (data.length &gt; 0) {
                    return (
                      &lt;Text
                        style={{
                          paddingTop: 5,
                          fontWeight: "bold",
                          fontStyle: "italic",
                          fontSize: 15,
                          color: title === "Completed Tasks:" ? "green" : "red",
                          textDecorationLine: "underline"
                        }}
                      &gt;
                        {title}
                      &lt;/Text&gt;
                    );
                  }
                }}
                stickySectionHeadersEnabled={false}
                sections={[
                  {
                    title: "Completed Tasks:",
                    data: this.props.tasks.filter(tasks =&gt; {
                      return tasks.taskCompleted === true;
                    })
                  },
                  {
                    title: "InComplete Tasks:",
                    data: this.props.tasks.filter(tasks =&gt; {
                      return tasks.taskCompleted === false;
                    })
                  },
                  ,
                ]}
                keyExtractor={(item, index) =&gt; item + index}
              /&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/SafeAreaView&gt;
  
    &lt;/View&gt;
  );}
  </code></pre>
  
  <p>//child item </p>
  
  <pre><code>class ToDoListItem extends React.Component {
  
  
      constructor(props) {
          super(props);
          //this.state = { checked: false };
      }
  
      selectItem = () =&gt; {
  
          let updatedObject = {
              taskID: this.props.value.taskID,
              taskCompleted: !this.props.value.taskCompleted,
          };
          this.props.done(updatedObject);
      };
      deleteItem = () =&gt; {
  
          let deletedObject = {
              taskID: this.props.value.taskID,
          };
          this.props.delete(deletedObject);
      };
      render() {
          return (
              &lt;View style={styles.viewStyle}&gt;
                  &lt;View style={styles.checkBoxStyle}&gt;
                    &lt;CheckBox
                       checkedCheckBoxColor="green"
                          onClick={this.selectItem}
                          isChecked={this.props.value.taskCompleted}/&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.inputTextViewStyle}&gt;
                      &lt;Text
                          style={
                              this.props.value.taskCompleted
                                  ? styles.completeDone
                                  : styles.inComplete
                          }&gt;
                          {this.props.value.taskValue}
                      &lt;/Text&gt;
  
                      {this.props.value.taskCompleted &amp;&amp; &lt;Text style={{ fontSize: 11, fontStyle: "italic", color: "blue" }}&gt;{"\n"}{"Completed @ " + this.props.value.taskCompletedTime}&lt;/Text&gt;}
  
                  &lt;/View&gt;
                  &lt;View style={styles.deleteTextStyle}&gt;
                      &lt;TouchableOpacity onPress={this.deleteItem}&gt;
                          &lt;Image
                              style={styles.deleteImage}
                              source={require('../../assets/delete.png')}
                          /&gt;
                      &lt;/TouchableOpacity&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          );
      }
  }
  </code></pre>