Reduxの代わりに新しいReactContext APIを使用して新しいアプリを開発しています。以前は、Redux
たとえばユーザーのリストを取得する必要があるときにcomponentDidMount
、アクションを呼び出すだけでしたが、React Contextを使用すると、アクションは内部に存在します。レンダー関数内にあるコンシューマー。つまり、レンダー関数が呼び出されるたびに、アクションが呼び出されてユーザーリストが取得されますが、不必要なリクエストが多数行われるため、これは適切ではありません。
では、componentDidMount
レンダーで呼び出す代わりに、アクションを1回だけ呼び出すにはどうすればよいですか?
例として、次のコードを見てください。
次のProviders
ように、すべてを1つのコンポーネントにラップしていると仮定します。
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
、私のユーザービューの小道具に住んでいないため、上記の例は機能しません。これが可能である場合、それを行う正しい方法は何ですか?