Блог

Я использую react и redux для создания приложения для социальных сетей. Я храню все данные о сообщениях в базе данных firebase в реальном времени. Но когда я получаю его, я не могу присвоить свойство firebase name в качестве идентификатора каждому сообщению. Это действие отвечает за извлечение данных из firebase.

 
  export const FetchPostStart = () => {
    return {
        type: actionTypes.Fetch_Post_Start
    };
};

  export const FetchPostSuccess = (fetchedData) => {
    return {
        type: actionTypes.Fetch_Post_Success,
        payload: fetchedData
    }
}

export const FetchPostError = (error) => {
    return {
        type: actionTypes.Fetch_Post_Error,
        error: error
    }
}
  
export const FetchPost = () => {
    return dispatch => {
        dispatch(FetchPostStart());
        axios.get('/Data.json')
        .then(response => {
            const fetchedData = [];
           for(let key in response.data){
                   fetchedData.push({
                   ...response.data[key],
                   id: response.data.name
               });
           }
           dispatch(FetchPostSuccess(fetchedData));
        })
    
        .catch(error => {
            dispatch(FetchPostError(error));
        });
    }
}
 

Это функция редуктора

  case actionTypes.Fetch_Post_Start: 
        return {
            ...state,
            loading:true
          }

        case actionTypes.Fetch_Post_Error: 
        return {
            ...state,
            loading:false
          }
  
          case actionTypes.Fetch_Post_Success: 
          return {
           ...state,
           loading: false,
           Data: action.payload
          }
 

Идентификатор остается неопределенным.

РЕДАКТИРОВАТЬ Вот как я пытаюсь сохранить идентификатор для новых сообщений. Это функции действий для добавления новой записи и удаления записи. Свойство firebase name здесь устанавливается в качестве идентификатора. Но когда я пытаюсь удалить сообщение, оно передает нулевое значение вместо идентификатора.

 
export const NewPostSuccess = (id, postData) => {
    return {
        type: actionTypes.New_Post_Success,
        payload: {
            data: postData,
            index: id
        }
    }
}

export const NewPostError = (error) => {
    return {
        type: actionTypes.New_Post_Error,
        error: error
    }
}


export const NewPost = (postData) => {
         
          return (dispatch) => {
           axios.post('/Data.json', postData)
           .then(response => {
               dispatch(NewPostSuccess(response.data.name, postData));
           })
           .catch(error => {
               dispatch(NewPostError(error));
           })
          }
  }

  export const DeletePostSuccess = (id) => {
    return {
        type: actionTypes.Delete_Post_Success,
        ID: id
    }
}


  export const DeletePost = (ID) => {
        return (dispatch) => {
    axios.delete('/Data/'  ID   '.json')
    .then(response => {
        console.log(response.data);
        dispatch(DeletePostSuccess(ID));
    })
    .catch(error => {
        dispatch(DeletePostError(error));
    })
            }
  }

 

Это редуктор

   case actionTypes.New_Post_Success: 
        const {Comment, ImageUrl, Date, User} = action.payload.data;
        const id = action.payload.index;
        console.log(id "Reducer function")
        return {
         ...state,
         loading: false,
         Data: [
           ...state.Data, 
           {Comment, ImageUrl, Date, User},
           id
          ],
        }

        case actionTypes.Delete_Post_Success:  
        return {
            ...state,
            loading: false,
          }

 

 .then(response => {
            const fetchedData = [];
           for(let key in response.data){
                   fetchedData.push({
                   ...response.data[key],
                   id: response.data[key].name //made a small change here
               });
           }
           dispatch(FetchPostSuccess(fetchedData));
        })