Как написать действие, которое обновляет магазин Redux?

Question

У меня есть веб-приложение, в котором используется React-Redux. Есть React таблица (список), которую мне нужно заполнить данными из базы данных. Я использую WebApi на сервере и автоматически сгенерированный (TypeWriter) web-api на клиенте. Ключевые части кода выглядят следующим образом:

1) Маршрутизация:

<Route path="/Dictionary/:dictionaryName" component={Dictionary} />

2) Состояние:

export type SingleDictionaryState = Readonly<{
    singleDictionary: WebApi.SingleDictionary[];
}>;

export const initialState: SingleDictionaryState = {
    singleDictionary: [],
};

3) Редуктор:

export const reducer: Reducer<SingleDictionaryState> = (state: SingleDictionaryState = initialState, action: AllActions): SingleDictionaryState => {
        switch (action.type) {
            case getType(actions.setSingleDictionaryValue):
                return { ...state, ...action.payload };
        }

        return state;
};

4) Действия:

const actionsBasic = {
    setSingleDictionaryValue: createAction('singleDictionary/setSingleDictionaryValue', (singleDictionary: any) => singleDictionary),
};

const actionsAsync = {
    getDictionaryByName: (dictionaryName: string) => {
        const currentState = store.getState().singleDictionary;
        WebApi.api.dictionaryQuery.getDictionary(capitalizeForApi(dictionaryName));
    },
};

export const actions = Object.assign(actionsBasic, actionsAsync);

const returnsOfActions = Object.values(actionsBasic).map($call);
export type AllActions = typeof returnsOfActions[number];

5) Контейнер:

const mapStateToProps = (state: AppState, ownProps: OwnProps): StateProps => ({
    dictionaryType: state.singleDictionary,
});

const mapDispatchToProps = (dispatch: Dispatch<any>): DispatchProps => ({
    onLoad: (dictionaryName: string) => {
        Actions.singleDictionary.getDictionaryByName(dictionaryName);
    },
});

export default withRouter(connect<StateProps, DispatchProps, OwnProps>(mapStateToProps, mapDispatchToProps)(DictionaryPage));

6) Клиентский веб-интерфейс:

class DictionaryQueryService {

    getDictionary(name: string) {
        const user = store.getState().oidc.user;
        const headers = new Headers();
        headers.append('Accept', 'application/json');
        headers.append('Content-Type', 'application/json');
        headers.append('Cache-Control', 'no-cache, no-store, must-revalidate');
        headers.append('Pragma', 'no-cache');
        headers.append('Expires', '0');

        if (user) {
            headers.append('Authorization', `Bearer ${user.access_token}`);
        }

        return () => {
            return fetch(`api/dictionaries/${encodeURIComponent(name)}`, {
                method: 'get',
                headers,
            })
            .then(response => {
                    if (!response.ok) {
                        const traceId = response.headers.get("X-Trace-Id");
                        throw new ApiError(`${response.status} ${response.statusText}`, traceId);
                    }
                    return response.status == 204 ? null : response.json() as Promise<any[]>;
                 });
        };
    }

На самом деле, я не уверен, как написать свое действие getDictionaryByName.

Answer 1

Просто мои 2 цента. Я использую синтаксис ES6, но Typescript будет работать аналогичным образом.

actionTypes.js

export const RESET_DICTIONARIES = 'RESET_DICTIONARIES';
export const LOAD_DICTIONARIES_REQUEST = 'LOAD_DICTIONARIES_REQUEST';
export const LOAD_DICTIONARIES_REQUEST_SUCCESS = 'LOAD_DICTIONARIES_REQUEST_SUCCESS';
export const LOAD_DICTIONARIES_REQUEST_FAILURE = 'LOAD_DICTIONARIES_REQUEST_FAILURE';

dictionaryActions.js

/* Load Dictionariies*/
export function loadDictionariesRequestBegin() {
  return {type: types.LOAD_DICTIONARIES_REQUEST};
}

export function loadDictionariesRequest(name) {
  return function(dispatch) {
    dispatch(loadDictionariesRequestBegin());
    // eslint-disable-next-line no-undef
    const request = new Request(`${YOUR_URL}/api/dictionaries/{name}`, {
      method: 'get',
      headers: new Headers({
        'Content-type': 'application/json',
        'Accept': 'application/json',
        'Authorization': auth.getToken(),        
      })
    });

    return fetch(request)
      .then(        
        response => {
          if (!response.ok) {            
            dispatch(loadDictionariesRequestFailure(response.statusText));
            throw new Error(response.statusText);
          }
          return response.json();
        },
        error => {
          dispatch(loadDictionariesRequestFailure(error));
          throw error;
        })
      .then(dictionaries=> {
        if (dictionaries) {
          dispatch(loadDictionariesRequestSuccess(dictionaries));
          return dictionaries;
        } else {
          throw new Error('dictionaries NOT found in response');
        }
      });
  };
}

export function loadDictionariesRequestSuccess(dictionaries) {
  return {type: types.LOAD_DICTIONARIES_REQUEST_SUCCESS, dictionaries};
}

export function loadDictionariesRequestFailure(error) {
  return {type: types.LOAD_DICTIONARIES_REQUEST_FAILURE, error};
}

dictionaryReducer.js

export default function dictionaryReducer(state = initialState.dictionaries, action) {
  switch (action.type) {
    case types.RESET_DICTIONARIES:
      return {
        ...state,
        loaded: false,
        loading: false,
        error: null,
      };
    /* load dictionaries*/
    case types.LOAD_DICTIONARIES_REQUEST:
      return {
        ...state,
        error: null,        
        loaded: false,
        loading: true
      };
    case types.LOAD_DICTIONARIES_REQUEST_SUCCESS:
      return {
        ...state,
        data: action.dictionaries,
        error: null,
        loaded: true,
        loading: false
      };
    case types.LOAD_DICTIONARIES_REQUEST_FAILURE:
      return {
        ...state,
        loaded: false,
        loading: false,
        error: action.error
      };
  return state;
}

initialState.js

export default {
  actions: {},
  dictionaries: { 
    data: [],
    loaded: false,
    loading: false,
    error: null,      
  },
}

словарь клиентской части API

this.props.actions
  .loadDictionaryRequest(name)
  .then(data => {
    this.setState({ data: data, errorMessage: '' });
  })
  .then(() => {
      this.props.actions.resetDictionaries();
  })
  .catch(error => {
    ...
  });

Надеюсь, это поможет.