I'm completely new with sagas.

Recently I was experimenting with an infrastructure for my future projects, including `react-router` v4 and sagas.

Well following the Beginner tutorial of sagas and some investigation on the matter i create an approximation, the idea is to make every connected component to redux to be it's own "micro universe" and have it own reducer, and, of course it own sagas file.

Ok, go with the code, here is the base structure of a component folder and the src folder:

```
src/
  +components/
    +foo-component/
      -actions.js
      -constants.js
      -defaultState.js
      -index.js
      -reducer.js
      -sagas.js
-App.js
-index.js
-rootReducer.js
-rootSagas.js
-store.js

```

Now, this is my `sagas.js` file fir `foo-component`, im creating the worker saga and the watcher saga, then i export them as an array to use in the `rootSagas.js`:

```
import { put, takeEvery } from 'redux-saga/effects'
import { COUNT } from './actions'

// Worker count
function* count() {
  yield put({ type: COUNT })
}

// Watcher helloSaga
function* watchCount() {
  yield takeEvery(COUNT, count)
}

const CounterSagas = [
  count(),
  watchCount()
]

export default CounterSagas

```

In the `rootSagas.js` file i get this sagas and export a single entry point which yield's all sagas at once:

```
import { all } from 'redux-saga/effects'

// sagas
import CounterSagas from './components/counter/sagas'

// run all
export default function* rootSagas() {
  yield all([
    // decompose
    ...CounterSagas,
  ])
}

```

Finally, in the store config the sagas are initiated:

```
import { compose, applyMiddleware, createStore } from 'redux'
import createSagaMiddleware from 'redux-saga'
import rootReducer from './rootReducer'
import rootSagas from './rootSagas'

let store
const sagaMiddleware = createSagaMiddleware()

if (process.env.NODE_ENV === 'production') {
  store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware)
  )
} else {
  store = createStore(
    rootReducer,
    compose(
      applyMiddleware(sagaMiddleware),
      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )
  )
}

sagaMiddleware.run(rootSagas)

export default store
export const action = (type, payload) => store.dispatch({type, payload})

```

Ok, with this i have two problems:

1. The counter saga is fired one time automatically (not when the event is fired by a button).
2. When i fire the action COUNT, the browser run into a infinite loop and get blocked:

> 
> Error: An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the "Pause on exceptions" behavior of the DevTools, which requires some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue.
> 
> 
> 

I know, this is my inexperience talking out, so can anyone give me some guidance?

Thanks