Question

我遇到了一个奇怪的问题，我的redux商店似乎正在返回不同值的副本？（如果我把它们混合起来，还是学习条款很抱歉！）

我有2个州。 Users和Added。我想显示列表，一个使用每个列表中的数据。目前，fetchUsers工作正常，但fetchAdded显示用户的原因不明，因此两个列表都显示相同的数据。

如果我将fetchUsers切换为使用refAdded，则会显示已添加，因此现在它只显示两个列表中添加的数组。我认为这意味着实际的呼叫正在运行，因为它可以从Firebase获取数据，但我不知道为什么会这样。

从firebase获取用户列表的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
    }
}

和fetch Added is：

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客户端导出如下所示：

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看似混合信息

0 个答案: