React redux-saga on server side doesn't take action after browser reload - node.js

Question

I have some problems with my universal react app runing with saga. I'm rendering react on server. One of my react component executes redux action that should be catched by saga listener on server.
Here is abstract example
// *Header.js*
class Header extends React.PureComponent {
componentWillMount() {
this.props.doAction()
}
....
}
export default connect(null, {doAction})(Header)
// *actions.js*
function doAction() {
return {
type: "action"
}
}
// *saga.js*
function* doAsyncAction(action) {
console.log(action);
}
function* watchAction() {
yield takeEvery("action", doAsyncAction);
}
export default [
watchAction(),
];
// *sagas.js* --> root saga
import 'regenerator-runtime/runtime';
import saga from './saga';
import anotherSaga from './anotherSaga'
export default function* rootSaga() {
yield all([].concat(saga).concat(anotherSaga));
}
// *configureStore.js*
const sagaMiddleware = createSagaMiddleware();
const middleware = applyMiddleware(sagaMiddleware);
...
sagaMiddleware.run(require('./sagas').default);
And after first run node process - it runs and give me console log, but
when I just refresh browser and function doAsyncAction is never executed
Please help, what I'm doing wrong ?

Answer 1

You need to change this:
function doAction() {
return {
type: "action"
}
}
to this:
const mapDispatchtoProps = (dispatch) => {
return {
doAction: () => dispatch({type: "action"})
}
}
export default connect(null, mapDispatchtoProps)(Header)
Client.js setup below for saga middleware:
const sagaMiddleware = createSagaMiddleware()
const createStoreWithMiddleware = applyMiddleware(sagaMiddleware)(createStore)
let store = createStoreWithMiddleware(rootReducers)
sagaMiddleware.run(rootSaga)
The above is implemented where ever you are implementing your store.