MapDispatchToProps returns a function - reactjs

Question

I try to read my articles from my firebase DB but I can't make it work.
Here is my DB:
myDB-myid
articles
1
body: "Lorem Ipsum Dolor si damet blablabla"
createdAt: 12345
subtitle: "ça promet beaucoup d'autres supers articles"
title: "Mon premier article"
2
body: "Encore du Lorem Ipsum et bla et bla et bla..."
createdAt: 34567
subtitle: "Vous avez aimé le premier ? Le deuxième va vous..."
title: "Et voici le deuxième article"
my component that should render the list of all articles, ArticlePage:
import React from 'react';
import { connect } from 'react-redux';
import Article from './Article';
import { startSetArticles } from '../../actions/articles';
const ArticlesPage = props => (
<div className="articles-wrapper">
<div className="container">
{console.log(props.articles)}
{
props.articles.length === 0 ? (
<p>No article</p>
) : (
props.articles.map(a => {
return <Article key={a.id} {...a}/>
})
)
}
</div>
</div>
);
const mapDispatchToProps = dispatch => ({
articles: () => dispatch(startSetArticles())
});
export default connect(undefined, mapDispatchToProps)(ArticlesPage);
my store:
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import authReducer from '../reducers/auth';
import articlesReducer from '../reducers/articles';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export default () => {
const store = createStore(
combineReducers({
auth: authReducer,
articles: articlesReducer
}),
composeEnhancers(applyMiddleware(thunk))
);
return store;
};
my actions in action/articles.js:
import database from '../firebase/firebase';
// SET_ARTICLES
export const setArticles = articles => ({
type: 'SET_ARTICLES',
articles
});
export const startSetArticles = () => {
return dispatch => {
return database.ref('articles').once('value').then(snapshot => {
const articles = [];
snapshot.forEach(a => {
articles.push({
id: a.key,
...a.val()
});
});
dispatch(setArticles(articles));
});
};
};
my reducer in reducers/articles.js:
const articlesReducerDefaultState = [];
export default (state = articlesReducerDefaultState, action) => {
switch (action.type) {
case 'SET_ARTICLES':
return action.articles;
default:
return state;
}
};
But I can't make it work. Here is the console output of the console.log(props.articles) from the component:
ƒ articles() {
return dispatch((0, _articles.startSetArticles)());
}
Any Idea ? It should render the two posts but it only returns the function itself. (I get a 'no article' from the ternary operator)

Answer 1

articles is a function because that's exactly what you do:
const mapDispatchToProps = dispatch => ({
articles: () => dispatch(startSetArticles())
});
you map dispatch to props and you mapped it to a prop called articles which is a function that dispatches an action. No surprise here. But I guess what you also want is to map state to props which you can do with a first argument of connect:
const mapStateToProps = state => ({ articlesList: state.articles });
export default connect(mapStateToProps, mapDispatchToProps)(ArticlesPage);
Now if you do console.log(props) you should get Object with two properties:
{
articles, // a function from mapDispatchToProps
articlesList // a function from mapStateToProps
}
EDIT:
You still however need to call your articles function to fetch data with firebase and populate the redux store. Best way to start asynchronous data is to use componentDidMount() hook:
class ArticlesPage extends React.Component {
componentDidMount() {
this.props.articles(); // use mapped function to dispatch redux action
}
render() {
// render data with array from the store
return (
<div className="articles-wrapper">
<div className="container">
{this.props.articlesList.length === 0 ? (
<p>No article</p>
) : (
this.props.articlesList.map(a => {
return <Article key={a.id} {...a} />;
})
)}
</div>
</div>
);
}
}

Answer 2

I think you only connected to the store, but never called the function startSetArticles(). Try add(this will work with your current mapDispatchToProps)
componentDidMount() {
this.props.articles()
}
This should call the function, which should update your store.
And I would recommend instead of:
const mapDispatchToProps = dispatch => ({
articles: () => dispatch(startSetArticles())
});
You should just do this:
const mapDispatchToProps = dispatch => ({
startSetArticles: () => dispatch(startSetArticles())
});
Then you would have to do this, which makes more sense.
componentDidMount() {
this.props.startSetArticles()
}
I think your confusion is about how to use mapDispatchToProps. When you mapDispatchToProps, it DOES NOT call that function right away. You will still need to call that function somewhere in the component. In your case componenetDidMount makes sense.
And then you need to add mapStateToProps, which will connect to the store and actually get the data back.
Here is a working example:
export class Morphology extends React.Component {
componentDidMount() {
document.title = 'Eflows | Morphology';
this.props.fetchGeoSites();
}
render() {
return (
<div>
<div style={styles.banner} />
<Layout geoSites={this.props.geoSites} />
</div>
);
}
}
Morphology.propTypes = {
fetchGeoSites: PropTypes.func,
geoSites: PropTypes.array,
};
const mapStateToProps = state => {
return {
geoSites: state.geoSite.geoSites,
};
};
const mapDispatchToProps = dispatch => {
return {
fetchGeoSites: () => dispatch(fetchGeoSites()),
};
};
I am using the same method, you can look into it more with this repo:
https://github.com/leogoesger/eflow-client

Answer 3

You should use the first parameter of connect to get the articles state.
connect(state => ({ articles: state.articles }), ...)
To set the articles state, you need to call startSetArticles somewhere like componentDidMount or in the file where you declare your store (if you want it to be called when the app loads) with store.dispatch(startSetArticles()).