同じプレーヤーのリストにアクセスする必要があるコンポーネントがいくつかあります。このプレイヤーのリストは変更されませんが、どのコンポーネントが最初にそれを必要とするかはわかりません。ここでの私の考えは、最初にそれを必要とするコンポーネント（axiosリクエスト）が私のreduxストアを更新し、次に他のコンポーネントがこれと同じカスタムフックを使用するということです。
export default function usePlayersList() {
const {list, loading, error} = useSelector(state => state.accounts.players)
const dispatch = useDispatch()
useEffect(() => {
try {
const response = authAxios.get(endpoints.players.retrieve)
response.then(res => {
dispatch({
type: "SET_PLAYERS_LIST",
payload: {
error: false,
loading: false,
list: res.data.payload
}
})
})
} catch (e) {
console.log(e)
dispatch({
type: "SET_PLAYERS_LIST",
payload: {
error: true,
loading: false,
list: []
}
})
}
}, [dispatch])
return {list, loading, error}
}
これはそのための私のカスタムフックです。それを行うことに不便があるかどうか、またはそのようなためのより良いパターンがあるかどうか疑問に思います。前もって感謝します。
ところで...さらに良いことに、（redux状態に送信するのではなく）usePlayersList内のuseState変数としてロードとエラーを設定します。これによりエラーが発生したため（この状態がコンポーネントごとに個別になると仮定すると、コンポーネントごとに読み込みとエラーが異なります）、それらをストアに送信しました。
よろしく、フェリペ。
各コンポーネントが独自のインスタンスを持つようなことを避けるには、reactのコンテキストAPIを使用する方が良いかもしれません。
コンテキストの定義：
import React from 'react';
const PlayersContext = React.createContext();
const PlayersProvider = PlayersContext.Provider;
export const usePlayersContext = () => React.useContext(PlayersContext);
export default function PlayersProvider({ children }) {
// add all the logic, side effects here and pass them to value
const { list, loading, error } = useSelector(
(state) => state.accounts.players
);
const dispatch = useDispatch();
useEffect(() => {
try {
const response = authAxios.get(endpoints.players.retrieve);
response.then((res) => {
dispatch({
type: 'SET_PLAYERS_LIST',
payload: {
error: false,
loading: false,
list: res.data.payload,
},
});
});
} catch (e) {
console.log(e);
dispatch({
type: 'SET_PLAYERS_LIST',
payload: {
error: true,
loading: false,
list: [],
},
});
}
}, [dispatch]);
return <PlayersProvider value={{ list, loading, error }}>{children}</PlayersProvider>;
}
PlayersProviderプレーヤーへのアクセスが必要なコンポーネントに親としてを追加します。
そしてそれらの子コンポーネントの内部：
import {usePlayersContext} from 'contextfilepath'
function Child() {
const { list, loading, error } = usePlayersContext()
return ( ... )
}
またProvider、reduxではなくそれ自体で状態を維持することもできます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加