L
L
lil_web2019-12-18 01:19:51
typescript
lil_web, 2019-12-18 01:19:51

How to make handleActions on Typescript in Redux?

I decided to learn how to make Redux on Typescript. I'm writing duck: a file with action creators and a reducer.
The typescript swears at the creators passed to the handleActionsaction:

const fetchSearchSuggestionsRequest: ActionFunction1<null, Action<null>>
A computed property name must be of type 'string', 'number', 'symbol', or 'any'.ts(2464)

Please tell me what to fix.
Code duck.ts:
import { createAction, handleActions, Action } from 'redux-actions';
import { combineReducers } from 'redux';

import * as constants from './constants';

export interface ISearchSuggestion {
  name: string;
}

export const fetchSearchSuggestionsRequest = createAction<null>(
  constants.FETCH_SEARCH_REQUEST
);
export const fetchSearchSuggestionsSuccess = createAction<
  Array<ISearchSuggestion>
>(constants.FETCH_SEARCH_SUCCESS);
export const fetchSearchSuggestionsFailure = createAction<
  Array<ISearchSuggestion>
>(constants.FETCH_SEARCH_FAILURE);

const searchSuggestions = handleActions<Action<
  Array<ISearchSuggestion>
> | null>(
  {
    [fetchSearchSuggestionsRequest]: () => null,
    [fetchSearchSuggestionsSuccess]: (
      _state,
      action: Action<Array<ISearchSuggestion>>
    ) => action.payload,
    [fetchSearchSuggestionsFailure]: (
      _state,
      action: Action<Array<ISearchSuggestion>>
    ) => action.payload
  },
  null
);

export default combineReducers({
  searchSuggestions
});

Documentation. Redux + Typescript
Documentation. handleActions

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question