Question

我已经设置了状态，动作，化简，类型（使用TypeScript）以及对这些动作的一些调用。该操作将调用适当的函数（我不确定它们是否真正返回数据），但是并非每次都调用此状态片的化简器。

我已经阅读了React-Redux文档，浏览了Stack Overflow问题，并询问了一位同事。我发现没有任何帮助。

Page.tsx

render() {
  this.props.getCards();
  ...
}

const mapStateToProps = (state: ApplicationState) => ({ ...state.cards, ...state.requests });

const actions = {
  ...CardActions.actionCreators,
  ...RequestActions.actionCreators,
};

export default connect(
  mapStateToProps,
  actions,
)(ApprovalPage);

/store/cards/types.ts

export interface ICard {
  id: string;
  cardNumber: number;
  owner: string;
}

export interface ICardState {
  cards: ICard[];
}

export const GET_CARDS = 'GET_CARDS';

interface IGetCardsAction {
  type: typeof GET_CARDS;
  payload: ICardState;
}

export type CardActionTypes = IGetCardsAction;

/store/cards/actions.ts

import { addTask } from 'domain-task';
import { AppThunkAction } from '..';
import * as api from '../../api/cardsAPI';
import {
  CardActionTypes,
  GET_CARDS,
  ICard,
} from './types';

export const actionCreators = {
  getCards: (): AppThunkAction<CardActionTypes> => (dispatch) =>  {
    const fetchTask = api.getCardsApi(location).then((data: ICard[]) => {
      console.log(data);
      dispatch ({
        payload: { cards: data },
        type: GET_CARDS,
      });
    });
    addTask(fetchTask);
  },
};

/api/cardsApi.ts

import axios from 'axios';
import { ICard } from '../store/cards/types';

export function getCardsApi(location: string): any{
  return axios
    .get(url, {
      params: {
        location,
      },
    })
    // Mock data
    .then((response) => {
      const card: ICard = {
        cardNumber: 12345,
        id: '1235464789',
        owner: '123123',
      };
      const cards: ICard[] = [ card ];
      return cards;
    })
    .catch((error) => {
      console.log(error);
    });
}

/store/cards/reducers.ts

import { Reducer } from 'redux';
import {
  CardActionTypes,
  GET_CARDS,
  ICardState,
} from './types';

const initialState: ICardState = {
  cards: [],
};

export const reducer: Reducer<ICardState> = (
  state: ICardState = initialState,
  action: CardActionTypes,
): ICardState => {
  console.log(action)
  switch (action.type) {
    case GET_CARDS:
      return {
        ...state,
        cards: action.payload.cards,
      };
    default:
      return state;
  }
};

/store/index.ts

import * as CardReducers from '../store/cards/reducers';
import * as CardTypes from '../store/cards/types';

export interface ApplicationState {
  cards: CardTypes.ICardState;
}

export const reducers = {
  cards: CardReducers.reducer,
};

export interface AppThunkAction<TAction> {
  (dispatch: (action: TAction) => void, getState: () => ApplicationState): void;
}

预期结果：状态已更新为包括从API提取的卡。

Answer 1

对于那些好奇的人...

我有几个文件被永久地转换为JS，这意味着当我编辑相应的TS文件时它们没有更新。其中一个这样的文件包括我注册减速器的位置。删除这些文件解决了我的问题。

未调用React-Redux Reducer

1 个答案: