Accessing the Store in Redux? - reactjs

Question

I have a project in react and redux with immutablejs. It looks like this:
The Page looks like this:
function mapStateToProps(state) {
return {
content: state.content
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(thunks, dispatch)
};
}
class ConnectedConnect extends Component {
componentDidMount() {
const { actions } = this.props
actions.retrieveContent();
console.log(this.props.content)
}
render() {
return (
<div>
<Header heading="Demo Heading" colour="orange" disableAnimation={false} />
</div >
);
}
}
`const Content = connect(mapStateToProps, mapDispatchToProps)`(ConnectedConnect);
export default Content
The api:
export function viewContent() {
return fetch("http://localhost:8080/watchlist/content",
{
method: "GET",
}).then(function (response) {
if (!response.ok) {
throw Error(response.statusText);
}
// Read the response as json.)
return response.json();
})
.catch(function (error) {
console.log('Looks like there was a problem: \n', error);
})
}
The actions:
export function contentSuccess(retrieveContentWasSuccessful) {
return { type: types.RETRIEVE_CONTENT_SUCCESS, contentSuccess };
}
export function retrieveContent() {
// make async call to api, handle promise, dispatch action when promise is resolved
return function (dispatch) {
return viewContent().then(retrieveContentWasSuccessful => {
dispatch(contentSuccess(retrieveContentWasSuccessful));
}).catch(error => {
throw (error);
});
};
}
The reducer:
export function contentReducer(state = fromJS({}), action) {
switch (action.type) {
case types.RETRIEVE_CONTENT_SUCCESS:
return state.merge(action.content)
default:
return state;
}
};
The store itself is like this:
const history = createBrowserHistory()
const store = createStore(
connectRouter(history)(rootReducer),
applyMiddleware(
routerMiddleware(history),
thunkMiddleware
)
);
export { store, history };
The api is successfully called. However I can't seem to actually access the response in the store! Grateful for any help with this!
Thanks!

Answer 1

Think you want to pass retrieveContentWasSuccessful here instead of contentSuccess:
export function contentSuccess(retrieveContentWasSuccessful) {
return { type: types.RETRIEVE_CONTENT_SUCCESS, retrieveContentWasSuccessful };
}