Je développe une nouvelle application en utilisant la nouvelle API React Context au lieu de Redux, et avant, avec Redux
, lorsque j'avais besoin d'obtenir une liste d'utilisateurs par exemple, j'appelle simplement componentDidMount
mon action, mais maintenant avec React Context, mes actions vivent à l'intérieur mon consommateur qui est à l'intérieur de ma fonction de rendu, ce qui signifie que chaque fois que ma fonction de rendu est appelée, elle appellera mon action pour obtenir ma liste d'utilisateurs et ce n'est pas bon car je vais faire beaucoup de requêtes inutiles.
Alors, comment puis-je appeler une seule fois mon action, comme dans componentDidMount
au lieu d'appeler dans render?
Juste pour illustrer, regardez ce code:
Supposons que j'emballe tout mon Providers
dans un seul composant, comme ceci:
import React from 'react';
import UserProvider from './UserProvider';
import PostProvider from './PostProvider';
export default class Provider extends React.Component {
render(){
return(
<UserProvider>
<PostProvider>
{this.props.children}
</PostProvider>
</UserProvider>
)
}
}
Ensuite, je mets ce composant Provider enveloppant toute mon application, comme ceci:
import React from 'react';
import Provider from './providers/Provider';
import { Router } from './Router';
export default class App extends React.Component {
render() {
const Component = Router();
return(
<Provider>
<Component />
</Provider>
)
}
}
Maintenant, à la vue de mes utilisateurs par exemple, ce sera quelque chose comme ceci:
import React from 'react';
import UserContext from '../contexts/UserContext';
export default class Users extends React.Component {
render(){
return(
<UserContext.Consumer>
{({getUsers, users}) => {
getUsers();
return(
<h1>Users</h1>
<ul>
{users.map(user) => (
<li>{user.name}</li>
)}
</ul>
)
}}
</UserContext.Consumer>
)
}
}
Ce que je veux, c'est ceci:
import React from 'react';
import UserContext from '../contexts/UserContext';
export default class Users extends React.Component {
componentDidMount(){
this.props.getUsers();
}
render(){
return(
<UserContext.Consumer>
{({users}) => {
getUsers();
return(
<h1>Users</h1>
<ul>
{users.map(user) => (
<li>{user.name}</li>
)}
</ul>
)
}}
</UserContext.Consumer>
)
}
}
Mais bien sûr, l'exemple ci-dessus ne fonctionne pas car les getUsers
accessoires de vue de mes utilisateurs ne sont pas présents. Quelle est la bonne façon de procéder si cela est possible?