title: Hooks and Redux Saga
body: <p>I am learning redux hooks and wondering how to use it along with redux saga.</p>
  
  <p>Currently the code written in saga is as follows.</p>
  
  <blockquote>
    <p>centers.js</p>
  </blockquote>
  
  <pre><code>componentDidMount() {
      this.props.getCenters();
    }
  
  ...
  
  &lt;tbody&gt;
                              {
                                this.props.centers ?
                                  &lt;React.Fragment&gt;
                                    {
                                      centers.map((center, index) =&gt;
                                        &lt;tr key={index}&gt;
                                          &lt;td&gt;{center.name}&lt;/td&gt;
                                          &lt;td&gt;{center.zip}&lt;/td&gt;
                                        &lt;/tr&gt;
                                      )
                                    }
                                  &lt;/React.Fragment&gt;
                                :
                                  &lt;tr&gt;
                                    &lt;td&gt; No data available&lt;/td&gt;
                                  &lt;/tr&gt;
  
                              }
                            &lt;/tbody&gt;
  </code></pre>
  
  <p>The actions file is defined as follows.</p>
  
  <pre><code>export const getCenters = () =&gt; ({
    type: types.CENTERS_REQUEST,
  });
  </code></pre>
  
  <p>The saga file is defined as follows.</p>
  
  <pre><code>import { DEFAULT_ERROR_MSG } from '../../constants';
  import { instance as centerProvider } from '../services/centerProvider';
  
  function* fetchCenters() {
    try {
      const response = yield call(centerProvider.getCenters);
      const centers = response.data.data.centers;
  
      // dispatch a success action to the store
      yield put({ type: types.CENTERS_SUCCESS, centers});
  
    } catch (error) {
      // dispatch a failure action to the store with the error
      yield put(DEFAULT_ERROR_MSG);
    }
  }
  
  export function* watchCenterRequest() {
    yield takeLatest(types.CENTERS_REQUEST, fetchCenters);
  }
  
  export default function* centerSaga() {
    yield all([
      watchCenterRequest()
    ]);
  }
  </code></pre>
  
  <p>So the question is,</p>
  
  <ul>
  <li>Do we still need redux if we use hooks?</li>
  <li>How can we rewrite the above code using hooks?</li>
  </ul>