アプリでContextApiを使用HooksしていReactNativeます。
これは、APIからブログの配列をフェッチするための私のコードです
const getBlogPosts = dispatch => {
return async () => {
try {
const response = await jsonServer.get("/blogposts");
dispatch({ type: "get_blogposts", payload: response.data });
} catch (err) {
dispatch({
type: "get_blogposts",
payload: "Something went wrong"
});
}
};
};
const blogReducer = (state, action) => {
switch (action.type) {
case "get_blogposts":
return action.payload;
.....
ここで私のコンポーネントファイルは以下のようなことをしています
const IndexScreen = ({ navigation }) => {
const { state, getBlogPosts } = useContext(Context);
useEffect(() => {
getBlogPosts();
}, []);
return (
<View>
<FlatList..../>
{state.length === 0 ? <ProgressBar /> : null}
ブログがないと、ネットワーク操作が終了した後もプログレスバーが表示され続けるため、プログレスバーを表示および表示するための上記のコードを記述できません。ユーザーが呼び出しgetBlogPostsたときに複数のディスパッチを起動しようとしましたが、状態の値が変更されます。ブール値から配列へ、そして再びブール値へ。
プログレスバーの可視性を処理する簡単な方法はありますか？
あなたは次のように派遣して、新しいタイプを持つことができますget_blogposts_in_progressし、セットtrue/falseのような減速機でstate.loading = trueの発送の場合get_blogposts_in_progress、発送state.loading = falseのAPI呼び出しが成功またはエラーのあるとき。
const getBlogPosts = dispatch => {
return async () => {
dispatch({ type: "get_blogposts_in_progress" });
try {
const response = await jsonServer.get("/blogposts");
dispatch({ type: "get_blogposts", payload: response.data });
} catch (err) {
dispatch({
type: "get_blogposts",
payload: "Something went wrong"
});
}
};
};
const blogReducer = (state, action) => {
switch (action.type) {
case "get_blogposts_in_progress":
return { ...state, ...{ loading: true } };
case "get_blogposts":
return { ...action.payload, ...{ loading: false } };
.....
そして、コンポーネントファイル。
const IndexScreen = ({ navigation }) => {
const { state, getBlogPosts } = useContext(Context);
useEffect(() => {
getBlogPosts();
}, []);
return (
<View>
<FlatList..../>
{state.loading ? <ProgressBar /> : null}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加