Я разрабатываю новое приложение, используя новый React Context API вместо Redux, и раньше, с Redux
, когда мне нужно было получить список пользователей, например, я просто вызывал componentDidMount
мое действие, но теперь с React Context мои действия жить в моем Consumer, который находится внутри моей функции рендеринга, что означает, что каждый раз, когда вызывается моя функция рендеринга, он вызывает мое действие для получения списка пользователей, и это не хорошо, потому что я буду выполнять много ненужных запросов.
Итак, как я могу вызвать только один раз мое действие, как в componentDidMount
вместо вызова в рендере?
Просто в качестве примера, посмотрите на этот код:
Предположим, я упаковываю всех моих Providers
в один компонент, например так:
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>
)
}
}
Затем я помещаю этот компонент провайдера, оборачивая все мое приложение, например так:
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>
)
}
}
Теперь, на мой взгляд пользователей, это будет примерно так:
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>
)
}
}
Что я хочу это:
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>
)
}
}
Но, конечно, что приведенный выше пример не работает, потому что getUsers
не живут в моем представлении пользователей. Как правильно это сделать, если это вообще возможно?