Магазин Redux не обновляется после отправки действия на мой редуктор - PullRequest
0 голосов
/ 21 марта 2020

Следующая проблема: в последние несколько часов я пытался написать универсальный редуктор машинописи c, и я чувствую, что он уже работает довольно хорошо, но есть только одна проблема - похоже, они связали его с моим магазином. Есть проблемы. Похоже, что хранилище не обновляется должным образом, так как компонент, который я пытался подключить к данным от редуктора, не получает новые реквизиты.

Это редуктор generi c. Он еще не полностью завершен, но функциональность добавления должна работать по крайней мере.

// Framework
import * as Redux from "redux";

// Functionality
import { CouldBeArray } from "data/commonTypes";
import { ensureArray } from "helper/arrayUtils";

type ReducerParams<T> = {
    actionIdentifier: string;
    key: keyof T;
}

export type ReducerState<T> = {
    data: Array<T>;
}

type ReducerAction<T> = Redux.Action & {
    payload: CouldBeArray<T>;
}

type Reducer<T> = {
    add: (data: T) => ReducerAction<T>;
    update: (data: T) => ReducerAction<T>;
    delete: (data: T) => ReducerAction<T>;
    replace: (data: T) => ReducerAction<T>;
    reducer: Redux.Reducer<ReducerState<T>, ReducerAction<T>>;
}

export const createReducer = <T>(params: ReducerParams<T>): Reducer<T> => {

    const ADD_IDENTIFIER = `${params.actionIdentifier}_ADD`;
    const UPDATE_IDENTIFIER = `${params.actionIdentifier}_UPDATE`;
    const DELETE_IDENTIFIER = `${params.actionIdentifier}_DELETE`;
    const REPLACE_IDENTIFIER = `${params.actionIdentifier}_REPLACE`;

    const initialState: ReducerState<T> = {
        data: []
    };

    const reducer = (state = initialState, action: ReducerAction<T>): ReducerState<T> => {
        switch (action.type) {
            case ADD_IDENTIFIER:
                const newState = { ...state };
                const newData = [ ...newState.data ];

                const payloadAsArray = ensureArray(action.payload);
                payloadAsArray.forEach(x => newData.push(x));

                newState.data = newData;
                return newState;
            case UPDATE_IDENTIFIER:
                return {
                    ...state,
                };
            case DELETE_IDENTIFIER:
                return {
                    ...state,
                };
            case REPLACE_IDENTIFIER:
                return {
                    ...state,
                };
            default:
                return initialState;
        }
    }

    const addAction = (data: T): ReducerAction<T> => {
        return {
            type: ADD_IDENTIFIER,
            payload: data,
        }
    };

    const updateAction = (data: T): ReducerAction<T> => {
        return {
            type: UPDATE_IDENTIFIER,
            payload: data,
        }
    };

    const deleteAction = (data: T): ReducerAction<T> => {
        return {
            type: DELETE_IDENTIFIER,
            payload: data,
        }
    };

    const replaceAction = (data: T): ReducerAction<T> => {
        return {
            type: REPLACE_IDENTIFIER,
            payload: data,
        }
    };

    return {
        add: addAction,
        update: updateAction,
        delete: deleteAction,
        replace: replaceAction,
        reducer: reducer,
    }
}

Далее мой магазин:

// Framework
import * as redux from "redux";

// Functionality
import { ReducerState } from "modules/common/Reducer/CrudReducer";

import { reducer as friendsReducer } from "modules/Friends/Reducer/FriendsReducer";
import { Friend } from "modules/Friends/types";

export type ReduxStore = {
    friendsReducer: ReducerState<Friend>;
}

export const store: ReduxStore = redux.createStore(
    redux.combineReducers({
        friendsReducer: friendsReducer.reducer,
    })
);

export default store;

и, наконец, не менее важный компонент:

type Props = {
    friends: Array<Friend>
}

export const FriendsList: React.FC<Props> = ({ friends }) => {

    return (
        <Flex className={"FriendsList"}>
            Friends
        </Flex>
    );
}

const mapStateToProps = (store: ReduxStore): Props => {
    return {
        friends: store.friendsReducer.data,
    };
}

export default connect(mapStateToProps)(FriendsList);

Проблема обычно разворачивается в следующем порядке:

  1. Данные правильно выбираются из сети
  2. Обновите хранилище через store.dispatch(friendsReducer.add(payload))
  3. С помощью отладчика я прошел через genericreducer и увидел, что новое состояние правильно содержит новые данные.
  4. Вот где возникает проблема - только что сгенерированное редуктором состояние не передается моему компоненту Friendslist , Он будет получать реквизиты только один раз, пока данные там еще пустые.

Где я go ошибся?

РЕДАКТИРОВАТЬ: По требованию код для friendsReducer:

import { createReducer } from "modules/common/Reducer/CrudReducer";
import { Friend } from "modules/friends/types";

export const reducer = createReducer<Friend>({
    actionIdentifier: "FRIENDS",
    key: "id"
});

export default reducer;

и для отправки:

const friendsResponse = await friendsCommunication.getFriends();

if (friendsResponse.success){
    this.dispatch(friendsReducer.add(friendsResponse.payload));
}

...

protected dispatch(dispatchAction: Action){
    store.dispatch(dispatchAction);
}

1 Ответ

0 голосов
/ 24 марта 2020

Обнаружена проблема. Мой универсальный редуктор c вернул по умолчанию следующее:

  default:
       return initialState;

, в то время как он должен вернуть state.

В противном случае он просто сбросил состояние все повторяющиеся редукторы для каждого действия.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...