[REACT] 스피너를 액션이 일어나기전에 보여주기/ 단어 추가하기전에 스피너 보여주기

로드가 되었는지 안되었는지

로드를 바꿔주는 액션 만들어서

단어 추가와 단어 삭제 시에도 스피너가 나오게 해보자!

2021.06.30 - [WEB/REACT] - [REACT] Material UI를 설치하고 로딩하기 전에 스피너화면 보여주기

 

 

 

 

(1) 리덕스에서 액션만들기

(2) 기본 변수 설정

 

 

(3) 액션 생성함수

 

 

 

(4) 리듀서

 

 

 

 

(5) 파이어베이스와 통신하는 곳에서

단어를 추가하기 전에는 isLoaded를 false로 설정하고

add한 후 then에서 isLoaded를 true로 설정

 

 

 

 

words.js

import {firestore} from "../../firebase";
 
const word_db = firestore.collection("myDictionary");
 
const GET_WORD = "words/GET_WORD";
const ADD_WORD = "words/ADD_WORD";
const DELETE_WORD = "words/DELETE_WORD";
const LOADED = "words/LOADED";
 
const initialState = {
    list : [ ],
    is_loaded: false,
}
 
// Action creator
export const getWord = (words)=>{
    return {type: GET_WORD, words};
}
export const addWord = (words)=>{
    return {type: ADD_WORD, words};
}
 
export const deleteWord = (words)=>{
    return {type: DELETE_WORD, words};
}
 
export const isLoaded = (loaded) => {
    return {type: LOADED, loaded}
  }
 
// 파이어베이스 미들웨어
export const loadDic = ()=>{
    return function(dispatch){
        word_db.get().then((docs)=>{
            let words_data = [];
 
            docs.forEach((doc)=>{
                if(doc.exists){
                    words_data = [...words_data, {id: doc.id, ...doc.data()}]
                }
            })
            dispatch(getWord(words_data));
        });
    };
};
 
export const addDic = (words) =>{
    return function (dispatch){
        let words_data = {word:words.word, desc:words.desc, ex:words.ex};
 
        dispatch(isLoaded(false));
        word_db.add(words_data).then(docRef =>{
            words_data = {...words_data, id: docRef.id};
            dispatch(addWord(words_data));
            dispatch(isLoaded(true));
        })
    }
}
 
export const deleteDic = (words) =>{
    return function(dispatch, getState){
        const words_data = getState().words.list[words];
        dispatch(isLoaded(false));
        if(!words_data.id){
            return;
        }
        word_db.doc(words_data.id).delete().then((docRef) =>{
            dispatch(deleteWord(words));
            dispatch(isLoaded(true));
        }).catch(error=>{
            console.log(error);
        });
    }
}
 
 
// reducer
export default function reducer(state = initialState, action = {}){
    switch(action.type){
        case "words/GET_WORD":{
            if(action.words.length>0){
                return {list: action.words, is_loaded:true};
            }  
            return state;
        }
 
        case "words/ADD_WORD":{
            const new_word_list = [ action.words,...state.list];
            return {list: new_word_list};
        }
        case "words/DELETE_WORD":{
            // 원래 인덱스랑 바뀐 인덱스가 같으면 안바꾸고 다르면 바꾼다.
            const word_list = state.list.filter((l, idx)=>{
                if(idx != action.words){
                    return l;
                }
            });
            return {list: word_list};
        }
        case "words/LOADED": {
 
            return {...state, is_loaded: action.loaded};
          }
        default: 
            return state;
    }
}