时间戳

首页 > 解决方案 > React-Redux Reducer 没有被调用

typescript - React-Redux Reducer 没有被调用

问题描述

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

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

页面.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 中提取的卡片。

编辑：我刚刚发现我的操作和类型已加载到页面源中，但减速器没有。关于可能导致这种情况的任何想法？

标签： typescriptreduxreact-reduxredux-thunkreact-tsx

解决方案

对于那些好奇...

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

推荐阅读