Oui c'est correct. C'est juste une fonction d'aide pour avoir un moyen plus simple d'accéder à vos propriétés d'état
Imaginez que vous avez une posts
clé dans votre applicationstate.posts
state.posts //
/*
{
currentPostId: "",
isFetching: false,
allPosts: {}
}
*/
Et composant Posts
Par défaut connect()(Posts)
, tous les accessoires d'état seront disponibles pour le composant connecté
const Posts = ({posts}) => (
<div>
{/* access posts.isFetching, access posts.allPosts */}
</div>
)
Maintenant, lorsque vous mappez le state.posts
à votre composant, cela devient un peu plus agréable
const Posts = ({isFetching, allPosts}) => (
<div>
{/* access isFetching, allPosts directly */}
</div>
)
connect(
state => state.posts
)(Posts)
mapDispatchToProps
normalement vous devez écrire dispatch(anActionCreator())
avec bindActionCreators
vous pouvez le faire aussi plus facilement comme
connect(
state => state.posts,
dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch)
)(Posts)
Vous pouvez maintenant l'utiliser dans votre composant
const Posts = ({isFetching, allPosts, fetchPosts, deletePost }) => (
<div>
<button onClick={() => fetchPosts()} />Fetch posts</button>
{/* access isFetching, allPosts directly */}
</div>
)
Mise à jour sur actionCreators ..
Un exemple de actionCreator: deletePost
const deletePostAction = (id) => ({
action: 'DELETE_POST',
payload: { id },
})
Alors, bindActionCreators
il vous suffit de prendre vos actions, de les envelopper dans l' dispatch
appel. (Je n'ai pas lu le code source de redux, mais l'implémentation pourrait ressembler à ceci:
const bindActionCreators = (actions, dispatch) => {
return Object.keys(actions).reduce(actionsMap, actionNameInProps => {
actionsMap[actionNameInProps] = (...args) => dispatch(actions[actionNameInProps].call(null, ...args))
return actionsMap;
}, {})
}