React redux saga - getting some odd behaviour - reactjs

Question

I am in process of learning how to use reactjs, redux, react-redux and redux-saga. My attempt at this in my public github repo, found here:
https://github.com/latheesan-k/react-redux-saga/tree/5cede54a4154740406c132c94684aae1d07538b0
My store.js:
import { compose, createStore, applyMiddleware } from "redux";
import createSagaMiddleware from "redux-saga";
import reducer from "./reducers";
import mySaga from "./sagas";
const sagaMiddleware = createSagaMiddleware();
const composeEnhancers =
typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// TODO: Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
})
: compose;
const storeEnhancer = composeEnhancers(applyMiddleware(sagaMiddleware));
export default createStore(reducer, storeEnhancer);
sagaMiddleware.run(mySaga);
my actions.js
export const HELLO_WORLD_REQUEST = "HELLO_WORLD_REQUEST";
export const HELLO_WORLD_RESPONSE = "HELLO_WORLD_RESPONSE";
export const HELLO_WORLD_ERROR = "HELLO_WORLD_ERROR";
export const helloWorldRequest = () => ({ type: HELLO_WORLD_REQUEST });
export const helloWorldResponse = text => ({ type: HELLO_WORLD_RESPONSE, text });
export const helloWorldError = error => ({ type: HELLO_WORLD_ERROR, error });
and my sagas.js
import { put, takeLatest } from "redux-saga/effects";
import { HELLO_WORLD_REQUEST, helloWorldResponse, helloWorldError } from "./actions";
function* runHelloWorldRequest(action) {
try {
// TODO: real api call here
yield put(helloWorldResponse("Hello from react-redux-saga :)"));
} catch (e) {
yield put(helloWorldError(e));
}
}
export default function* mySaga() {
yield takeLatest(HELLO_WORLD_REQUEST, runHelloWorldRequest);
}
and my helloWorldReducer.js
import { HELLO_WORLD_RESPONSE } from "../actions";
export default (state = "", { type, text }) => {
switch (type) {
case HELLO_WORLD_RESPONSE:
return text;
default:
return state;
}
};
and this is how put it all together on my App component:
class App extends Component {
componentDidMount() {
this.props.helloWorldRequest();
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>{this.props.responseText}</p>
</header>
</div>
);
}
}
const mapStateToProps = state => ({ responseText: state.helloWorldReducer });
const mapDispatchToProps = dispatch => bindActionCreators({ helloWorldRequest }, dispatch);
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
This works fine, but here's the odd behaviour I am trying to understand. In order to get the response value out of the state and map it into props, I had to do this:
const mapStateToProps = state => ({ responseText:
state.helloWorldReducer });
Based on what I saw in the react devtools:
Notice after the request is processed and a response is generated; the resulting state object contains a field called helloWorldReducer.
Where did this come from?
I assumed this field name should have been called text.
P.S. Sorry about the long post; still learning react-redux-saga, so I didn't know which part of my code was relevant to the question at hand.

Answer 1

the resulting state object contains a field called helloWorldReducer.
Where did this come from?
It comes from your root reducer which is actually the reducer created by using the combineReducers() method.
This is your reducers/index.js file which export the root reducer for creating redux store:
import { combineReducers } from "redux";
import helloWorldReducer from "./helloWorldReducer";
export default combineReducers({
helloWorldReducer // here
});