title: React-Redux-Saga TypeError: Cannot read property 'data' of null
body: <p>Please lemme know I'm stuck past 3 days.I'm newbie to Redux Saga I'm not understanding where I'm going wrong. As I've just started dont have much experience, not understood the sagas that well:( .But I wanna get onto it.</p>
  
  <p>I need to show sales data in line graph following is my code</p>
  
  <p>Sample Json Data</p>
  
  <pre><code>{"data":[{"year":"2014","Sales":4390,"Orders":3800},{"year":"2013","Sales":4490,"Orders":4300},{"year":"2015","Sales":2200,"Orders":3400},{"year":"2016","Sales":1280,"Orders":2398},{"year":"2017","Sales":5000,"Orders":4300},{"year":"2018","Sales":4780,"Orders":2908},{"year":"2019","Sales":5890,"Orders":4800}]}
  </code></pre>
  
  <p>Admin Folder</p>
  
  <p>adminActions.js   </p>
  
  <pre><code>                import {GET_SALES_DATA} from '../constants/actionTypes';
                  export const getSales =()=&gt;({
                  type:GET_SALES_DATA
                  });
  </code></pre>
  
  <p>adminReducer.js</p>
  
  <pre><code>                import {GET_SALES_DATA,SALES_DATA_RECEIVED} from '../constants/actionTypes';
  
                  const adminReducer=(state={},action)=&gt;{
                      switch(action.type){
                          case GET_SALES_DATA:
                              return {...state};
                          case SALES_DATA_RECEIVED:
                              return {...state,payload:action.salesDataPerYear}  **//issue here   payload data is not received state is not getting updated with the data**
                          default:
                              return state;
                      }
                  }
  
                  export default adminReducer;
  </code></pre>
  
  <p>adminSaga.js</p>
  
  <pre><code>                import {put,takeLatest,all} from 'redux-saga/effects';
                  import {GET_SALES_DATA,SALES_DATA_RECEIVED} from '../constants/actionTypes';
  
                  function *getSales(){
                  console.log("5saga")
                  const salesDataPerYear=yield fetch("api call")
                      .then(response=&gt;response.data);
  
  
                  yield put({type:SALES_DATA_RECEIVED,salesDataPerYear:salesDataPerYear})
                  }
  
  
                  function *actionWatcher(){
                  yield takeLatest(GET_SALES_DATA,getSales)
                  }
  
                  export default function *rootSaga(){
                  yield all([
                      actionWatcher(),
                  ]);
                  }
  </code></pre>
  
  <p>dashboard.js</p>
  
  <pre><code>                const mapStateToProps=(state)=&gt;({
                  data:state.salesDataPerYear
                  })
  
                  const mapDispatchToProps = {
                  getSales:getSales
                  };
  
  
                  class DashboardMain extends React.Component {
  
                  componentDidMount(){
                  this.props.getSales()
                  }
  
                  render() {
                  const { classes,data } = this.props;
                 // const  { data } =this.state;
                  **console.log(data)// data not rendering in console is the saga i've written is correct?**
  
                  return (
                  &lt;div className={classes.root}&gt;   
                      &lt;Grid container spacing={24}&gt;
                          &lt;Grid item xs={12}&gt;
                          &lt;SimpleLineChart data={data} /&gt;**//commented**
                          &lt;/Grid&gt;
                          &lt;Grid item xs={12}&gt;
                          &lt;SimpleTable /&gt; 
                          &lt;/Grid&gt;
                      &lt;/Grid&gt;
                  &lt;/div&gt;
                  );
                  }
                  }
  
                  DashboardMain.propTypes = {
                  classes: PropTypes.object.isRequired,
                  };
  
                  const Dashboard=connect(mapStateToProps,mapDispatchToProps)(DashboardMain);
  </code></pre>
  
  <p>simleLineChart.js (UPDATED)</p>
  
  <pre><code>    &lt;LineChart data={ this.props.data }&gt; **// TypeError: Cannot read property 'props' of undefined**
  </code></pre>
  
  <p>Following is store folder</p>
  
  <pre><code>  index.js
  
              import createSagaMiddleware from 'redux-saga';
              import {createStore,applyMiddleware} from 'redux';
              import {logger} from 'redux-logger';
              import rootSaga from '../adminDashboard/adminSaga';
              import reducers from '../adminDashboard/adminReducers';
  
              const sagaMiddleware=createSagaMiddleware();
  
              const store=createStore(
              reducers,
              applyMiddleware(sagaMiddleware,logger),
              );
  
              sagaMiddleware.run(rootSaga);
  
              export default store;
  </code></pre>
  
  <p>Data is not shown in line chart.I know there's some error in my saga but I dont know what is it :(.</p>
  
  <p>Can anyone please lemme know where I'm going wrong. Anything which I've missed onto. Any help is appreciated.</p>
  
  <p>Updates</p>
  
  <p>Data not rendering in console is the saga I've written is corrector I've missed onto something?</p>
  
  <pre><code>                undefined
                  redux-logger.js:389  action GET_SALES_DATA @ 12:38:06.302
                  redux-logger.js:400  prev state {}
                  redux-logger.js:404  action     {type: "GET_SALES_DATA"}type: "GET_SALES_DATA"__proto__: Object
                  redux-logger.js:413  next state {}
                  adminSaga.js:7 5saga
  
                              Response {type: "cors", url: "API call", redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: falseheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "cors"url: "API call"__proto__: Response
                              redux-logger.js:389  action SALES_DATA_RECEIVED @ 12:38:07.103
                              redux-logger.js:400  prev state {}__proto__: Object
                              redux-logger.js:404  action     {type: "SALES_DATA_RECEIVED", payload: Response, @@redux-saga/SAGA_ACTION: true}payload: Responsebody: (...)bodyUsed: falseheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "cors"url: "API call"__proto__: Responsetype: "SALES_DATA_RECEIVED"@@redux-saga/SAGA_ACTION: true__proto__: Object
                              redux-logger.js:413  next state {payload: undefined}payload: undefined__proto__: Object
  </code></pre>
  
  <p>I've commented the simpleLineChart there some issue with the saga and reducer I dont get the result.I updated with the log please check. the API call is retriving the data. But in reducer I'm doing wrong which I've no idea.Please lemme know</p>