title: Pass data from component to action and saga using React/Redux saga
body: <p>I'm using React with Redux Saga. When I try to execute a Saga Effect in my component with this.props.dispatch({type: CreateActionType.CREATE_ASYNC}); nothing happens, it is not executed.</p>
  
  <p>And when I console.log this.props.data in index.js, it's null</p>
  
  <p>Please let me know if missing necessary info here.</p>
  
  <p>api.js</p>
  
  <pre><code>export const create = (params) =&gt; {
  const dataList = {
      data: {data1: 1, data2: 2,},
      statusCode: 200,
  }
      return dataList;
  };
  </code></pre>
  
  <p>sagas.js</p>
  
  <pre><code>import { put, call, takeEvery , all } from 'redux-saga/effects'
  import { create } from '../api';
  
  import * as CreateActionType from './constants';
  
  export function* createAsync(action) {
      const result = yield call(create, action.params);
      const statusCode = result.statusCode;
  
      if (statusCode === 200) {
          yield [
              put({ type: CreateActionType.CREATE_SUCCESS, params: result.data }),
          ];
      } else {
          console.warn("createAsync error", result.data);
      }
  };
  
  function* WatchCreate() { 
      yield [
          takeEvery(CreateActionType.CREATE_ASYNC, createAsync),
      ]  
  }
  
  export default function* rootSaga() {
      yield all([
          WatchCreate(),
      ])
  }
  </code></pre>
  
  <p>store.js</p>
  
  <pre><code>import * as CreateActionType from './constants';
  import { combineReducers } from 'redux';
  
  const defaultState = {
      data: null,
  }
  
  function CreateStore(state = defaultState, action) {
  
      switch (action.type) {
          case CreateActionType.CREATE_SUCCESS:
              return {
                  ...state,
                  createStatus: true,
              };
          default:
              return state;
      }
  };
  
  const rootReducer = combineReducers({
      CreateStore,
  })
  
  export default rootReducer;
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import * as CreateActionType from './constants';
  
  class CreateNote extends Component {
      constructor(props){
          super(props);
  
          this.state = {};
      };
  
      componentDidMount() {
          this.props.dispatch({
              type: CreateActionType.CREATE_ASYNC,
          });
      };
  
      render() {
          return &lt;p&gt;{this.props.data}&lt;/p&gt;;
      }
  }
  
  const mapStateToProps = (state) =&gt; {        
      return state.CreateStore;
  };
  
  export default connect(mapStateToProps)(CreateNote);
  </code></pre>
  
  <p>configstore.js</p>
  
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import createSagaMiddleware from 'redux-saga';
  import rootSaga from './container/sagas';
  import rootReducer from './container/stores';
  
  export default function ConfigureStore() {
      const sagaMiddleware = createSagaMiddleware();
  
      const store = createStore(rootReducer,
          applyMiddleware(sagaMiddleware)
      );
  
      sagaMiddleware.run(rootSaga);
  
      return store;
  }
  </code></pre>