如何在不重新加载页面的情况下更新和删除

时间:2019-08-07 06:43:22

标签: reactjs firebase redux

我正在尝试通过Redux更新和删除云Firestore上的一些笔记,每件事似乎都可以正常工作,但是我应该重新加载页面以查看结果

import { combineReducers } from 'redux';

import authReducer from './authReducer';
import noteReducer from './noteReducer';
import { firestoreReducer } from 'redux-firestore';
import { firebaseReducer } from 'react-redux-firebase';

const rootReducer = combineReducers({
    auth: authReducer,
    note: noteReducer,
    firestore: firestoreReducer,
    firebase: firebaseReducer
});

export default rootReducer;



const store = createStore(rootReducer,
    composeEnhancers(
        applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
        reduxFirestore(fbConfig),
        reactReduxFirebase(fbConfig, {useFirestoreForProfile: true, userProfile: 'users', attachAuthIsReady: true})
    )

);

这是我的笔记动作:

export const createNote = (note) => {
    return (dispatch, getState, {getFirebase, getFirestore}) => {
        const firestore = getFirestore();
        const profile = getState().firebase.profile;
        const authorId = getState().firebase.auth.uid;
        firestore.collection('notes').add({
            ...note,
            authorFirstName: profile.firstName,
            authorLastName: profile.lastName,
            authorId: authorId,
            createdAt: new Date(),
        })
        .then(() => {
            dispatch({type: 'CREATE_NOTE_SUCCESS', note});
        })
        .catch((err) => {
            dispatch({type: 'CREATE_NOTE_ERROR', err});
        })

    };
};

export const updateNote = (updatedNote, id) => {
    return (dispatch, getState, { getFirestore }) => {
        const firestore = getFirestore();
        firestore.collection('notes').doc(id.toString()).update({
        ...updatedNote,
        createdAt: new Date(),
        })
            .then(() => {
                dispatch({type: 'UPDATE_NOTE_SUCCESS'}, updatedNote)
            })
            .catch(() => {
                dispatch({type: 'UPDATE_NOTE_ERROR'})
            })
    };
};

export const deleteNote = (id) => {
    return (dispatch, getState, { getFirestore }) => {
        const firestore = getFirestore();
        firestore.collection('notes').doc(id.toString()).delete()
        .then(() => {
            dispatch({type: 'DELETE_NOTE_SUCCESS'}, id);
        })
        .catch(() => {
            dispatch({type: 'DELETE_NOTE_ERROR'})
        });
    };
};

这是我的减音器

import * as actionTypes from '../actions/actionTypes';
import { updateObject } from '../../../shared/utility';

const initState = {
    notes: [],
    id: null,
    error: null,
    changed: false
};

const noteReducer = (state = initState, action) => {
    switch (action.type) {
        case actionTypes.CREATE_NOTE_SUCCESS:
            return updateObject(state, {error: null , changed: true})

        case actionTypes.CREATE_NOTE_ERROR:
            return updateObject(state, {error: action.err});

        case actionTypes.UPDATE_NOTE_SUCCESS:
            return updateObject(state, {error: null, changed: true});

        case actionTypes.UPDATE_NOTE_ERROR:
            return updateObject(state, {error: action.err});

        case actionTypes.DELETE_NOTE_SUCCESS:
            return updateObject(state, {   
            notes: state.notes.filter(note => note.id !== action.id),
            error: null,
            changed: true
            });

        case actionTypes.DELETE_NOTE_ERROR:
            return updateObject(state, {error: action.err});

        default:
            return state;
    }
};

export default noteReducer;

这是我代码的某些部分,我不知道我做错了什么部分或者错过了什么,我非常感谢您的帮助

0 个答案:

没有答案