火力地堡+减速作出反应似乎越来越混信息(Firebase + React Reducers seem

2019-09-27 01:03发布

我碰到一个奇怪的问题,我的终极版商店似乎返回不同的值的副本? (仍在学习方面很抱歉,如果我把它们混合起来!)

我有2个状态。 UsersAdded 。 我想展现给列表中,使用从他们每个人的数据之一。 目前,fetchUsers工作正常,但fetchAdded显示,原因未知用户,让这两个列表显示相同的数据。

如果我切换fetchUsers使用refAdded话,就说明添加,所以现在只显示两个列表中添加的阵列。 我想,这意味着实际调用工作原因可以从火力地堡获得的数据,但我不知道为什么会发生这种事。

FetchUsers后者从火力用户列表如下:

export function fetchUsers() {
    return (dispatch) => {
        refUsers.on('value', snapshot => {
            dispatch({
                type: 'FETCH_USER', 
                payload: snapshot.val()
            });
        });
    }
}

FetchAdded看起来是这样的:

export function fetchAdded() {
    return (dispatch) => {
        refAdded.on('value', snapshot => {
            dispatch({
                type: 'FETCH_ADDED', 
                payload: snapshot.val()
            });
        });
    }
}

该减速器是这样的:

export default function(state = [], action) {
    switch (action.type) {
        case 'FETCH_USER':
            return [action.payload];

        case 'ADDED_USER':
            return [action.payload, ...state];

        case 'MOVE_USER':
            const newState = [...state];
            newState.splice(action.payload.index, 1);
            return newState;

        case 'MOVE_ITEM':
            return [action.payload.user, ...state];

        default:
            return state
    }
}

并获取新增为:

export default function(state = [], action) {
    switch (action.type) {
        case 'FETCH_ADDED':
            return [action.payload];

        case 'MOVE_ITEM':
            const newState = [...state];
            newState.splice(action.payload.index, 1);
            return newState;

        case 'MOVE_USER':
            return [action.payload.user, ...state]

        default:
            return state
    }
}

我这里将结合他们两个:

const rootReducer = combineReducers({
    users: UserReducer,
    added: AddedReducer
});

和我的火力客户端出口是这样的:

firebase.initializeApp(config);

export const refUsers = firebase.database().ref("users")
export const refAdded = firebase.database().ref("added")
export const auth = firebase.auth
export const provider = new firebase.auth.GoogleAuthProvider();

在我的实际网页,我显示2只列出,这是我有:

function mapStateToProps(state) {
  return {
    users: state.users,
    added: state.added
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addUser, moveUser, moveItem, fetchUsers, fetchAdded }, dispatch);
}
文章来源: Firebase + React Reducers seemingly getting mixed info