Ошибка при использовании createStore с машинописью и thunk - PullRequest
Новая
       15

Ошибка при использовании createStore с машинописью и thunk

0 голосов
/ 31 мая 2019

Я новичок в машинописи и пытаюсь преобразовать приложение реагировать на использование машинописи. При использовании функции createStore из 'redux' в моем файле index.tsx я получаю следующую ошибку. 

  Type '{}' is missing the following properties from type '{ customersLoading: boolean; customersLoadError: boolean; customers: {}; editCustomerInProgress: boolean; editCustomerSuccess: boolean; editCustomerFail: boolean; addCustomerInProgress: boolean; ... 6 more ...; searchResults: {}; }': customersLoading, customersLoadError, customers, editCustomerInProgress, and 10 more.  TS2345

Кажется, что состояние определяется как тип {}, но я определил интерфейс для объекта состояния.

index.js 

import ReactDOM from 'react-dom';
import App from './App';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';

import reducer from './store/reducer';

import * as serviceWorker from './serviceWorker';

const composeEnhancers = compose;

const rootReducer = reducer;

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

const app = (
    <Provider store={store}>
        <App />
    </Provider>
);


ReactDOM.render(app, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.

serviceWorker.unregister();

Reducer.tsx 

import {stateShape, actionShape} from '../types/index';

const initialState = {
    customersLoading: false,
    customersLoadError: false,
    customers: {},
    editCustomerInProgress: false,
    editCustomerSuccess: false,
    editCustomerFail: false,
    addCustomerInProgress: false,
    addCustomerSuccess: false,
    addCustomerFail: false,
    deleteCustomerInProgress: false,
    deleteCustomerSuccess: false,
    deleteCustomerFail: false,
    searchMode: false,
    searchResults: {}
};

const updateObject = (oldObject: {}, updatedProperties: {}) => {
    return {
        ...oldObject,
        ...updatedProperties
    };
};

const editCustomer = (state: stateShape, action: actionShape) => {
    let updatedState = {
        editCustomerInProgress: false,
        editCustomerFail: false,
        editCustomerSuccess: true,
        customers: {
            ...state.customers,
            [action.payload.customerId]: action.payload.customerDetails
        },
        searchResults: {...state.searchResults}
    };

    if (state.searchMode){
        updatedState = {
            ...updatedState,
            searchResults: {
                ...state.searchResults,
                [action.payload.customerId]: action.payload.customerDetails
            }
        }
    };
    return updateObject(state, updatedState);
};

const addCustomer = (state: stateShape, action: actionShape) => {
    const updatedState = {
        addCustomerInProgress: false,
        addCustomerFail: false,
        addCustomerSuccess: true,
        customers: {
            ...state.customers,
            [action.payload.customerId]: action.payload.customerData
        }
    };
    return updateObject(state, updatedState);
};

const deleteCustomer = (state: stateShape, action: actionShape) => {
    const updatedState = {
        deleteCustomerInProgress: false,
        deleteCustomerFail: false,
        deleteCustomerSuccess: true,
        customers: {
            ...state.customers,
            [action.payload.customerId]: null
        }
    };
    return updateObject(state, updatedState);
};

const searchCustomers = (state: stateShape, action: actionShape) => {
    interface arrayInterface {
        [key: number]: any 
    };

    //filter matching customers from list of customers by search term
    const matchingCustomers = Object.entries(state.customers).filter((current: arrayInterface) => {
        let firstname = current[1].firstName.toLowerCase();
        let lastname = current[1].lastName.toLowerCase();
        let searchTerm = action.payload.searchTerm.toLowerCase();
        return firstname === searchTerm || lastname === searchTerm;
    });

    let matchingCustomersObject;

    matchingCustomers.forEach((current: arrayInterface) => {
        matchingCustomersObject[current[0]] = current[1];
    });

    const updatedState = {
        searchMode: true,
        searchResults: matchingCustomersObject
    };

    return updateObject(state, updatedState);
};

let reducer = (state = initialState, action: actionShape) => {
    switch (action.type){
        case actionTypes.LOAD_CUSTOMERS_START:
            return updateObject(state, {customersLoading: true});
        case actionTypes.LOAD_CUSTOMERS_FAIL:
            return updateObject(state, {customersLoading: false, customersLoadError: true});
        case actionTypes.LOAD_CUSTOMERS_SUCCESS:
            return updateObject(state, {customersLoading: false, customers: action.payload.customers});
        case actionTypes.EDIT_CUSTOMER_START:
            return updateObject(state, {editCustomerInProgress: true, editCustomerSuccess: false});
        case actionTypes.EDIT_CUSTOMER_FAIL:
            return updateObject(state, {editCustomerInProgress: false, editCustomerFail: true});
        case actionTypes.EDIT_CUSTOMER_SUCCESS:
            return editCustomer(state, action)
        case actionTypes.ADD_CUSTOMER_START:
            return updateObject(state, {addCustomerInProgress: true});
        case actionTypes.ADD_CUSTOMER_FAIL:
            return updateObject(state, {addCustomerInProgress: false, addCustomerFail: true});
        case actionTypes.ADD_CUSTOMER_SUCCESS:
            return addCustomer(state, action);
        case actionTypes.DELETE_CUSTOMER_START:
            return updateObject(state, {deleteCustomerInProgress: true});
        case actionTypes.DELETE_CUSTOMER_FAIL:
            return updateObject(state, {deleteCustomerInProgress: false, deleteCustomerFail: true});
        case actionTypes.DELETE_CUSTOMER_SUCCESS:
            return deleteCustomer(state, action);
        case actionTypes.SEARCH_CUSTOMER_START:
            return searchCustomers(state, action)
        case actionTypes.SEARCH_CUSTOMER_END:
            return updateObject(state, {searchMode: false, searchResults: []})
        default:
            return state;
    }
};

export default reducer;

Формы действий и состояний, импортируемые reducer.tsx 

    customersLoading: boolean,
    customersLoadError: boolean,
    customers: {},
    editCustomerInProgress: boolean,
    editCustomerSuccess: boolean,
    editCustomerFail: boolean,
    addCustomerInProgress: boolean,
    addCustomerSuccess: boolean,
    addCustomerFail: boolean,
    deleteCustomerInProgress: boolean,
    deleteCustomerSuccess: boolean,
    deleteCustomerFail: boolean,
    searchMode: boolean,
    searchResults: {}
};

export interface actionShape {
    type: string,
    payload: {
        customerId: string,
        customerData: Object,
        customerDetails: Object,
        customers: Object,
        searchTerm: string
    }
};

Кто-нибудь может указать мне правильное направление, чтобы решить эту проблему?

1 Ответ

0 голосов
/ 31 мая 2019

Проблема возникает из-за несовместимости подписи reducer.Давайте посмотрим, как определяется createStore. 

export interface StoreCreator {
    <S, A extends Action, Ext, StateExt>(
        reducer: Reducer<S, A>,
        enhancer?: StoreEnhancer<Ext, StateExt>
    ): Store<S & StateExt, A> & Ext
    <S, A extends Action, Ext, StateExt>(
       reducer: Reducer<S, A>,
       preloadedState?: DeepPartial<S>,
       enhancer?: StoreEnhancer<Ext>
    ): Store<S & StateExt, A> & Ext
}

По существу это перегруженная функция, и нас интересует тип первого аргумента, reducer. 

export type Reducer<S = any, A extends Action = AnyAction> = (
    state: S | undefined,
    action: A
) => S

Reducer принимает два аргумента типа S (для state) и типа A (для действия) и возвращает значение типа S.

Но ваш reducer определен следующим образом 

let reducer = (state = initialState, action: actionShape) => { /*...*/ }

Для всех действий он возвращает updateObject(state, { /*...*/ }), что в свою очередь определяется как 

const updateObject = (oldObject: {}, updatedProperties: {}) => 
{
    return {
        ...oldObject,
        ...updatedProperties
    }
}

В результате TS выводтип возврата updateObject должен быть {}, и он несовместим с S, который в вашем случае равен stateShape.

Чтобы решить эту проблему, я предлагаю использовать следующую подпись для updateObject

const updateObject = (oldObject: stateShape, updatedProperties: Partial<stateShape>): stateShape => {/*...*/}

Итак, первый аргумент типа stateShape и второй - как Partial<stateShape>.Это позволяет передавать второй аргумент только с некоторыми свойствами исходного stateShape, но запрещает добавлять несуществующие свойства в состояние.

Также неплохо обновить сигнатуру функции reducer, чтобы она возвращала только stateShape

let reducer = (state = initialState, action: actionShape): stateShape
...