Question

我正在使用打字稿处理我的第一个React Redux应用程序，并且遇到一个特殊的错误，那就是reducer正在接收的对象是'undefined'。

types.ts

//Action types
export const ADD_FAVOURITE = 'ADD_FAVOURITE'
export const REMOVE_FAVOURITE = 'REMOVE_FAVOURITE'

//Add favourite action
interface addFavouriteAction {
  type: typeof ADD_FAVOURITE,
  favourite: ImageThumbnail
}

//Remove favourite action
interface removeFavouriteAction {
  type: typeof REMOVE_FAVOURITE,
  id: string
}

export type favouriteActionTypes = addFavouriteAction | removeFavouriteAction

export interface favouriteState {
  favourites: ImageThumbnail[]
}

export const initialState: favouriteState = {
  favourites: []
}

export type rootState = ReturnType<typeof favouriteReducer>

store.ts

export const rootReducer = combineReducers({
  favouriteReducer
})

const store = createStore(rootReducer)
export default store

actions.ts

export function addFavourite (image: ImageThumbnail): favouriteActionTypes {
  return {
    type: ADD_FAVOURITE,
    favourite: image
  }
}

export function removeFavourite (id: string): favouriteActionTypes {
  return {
    type: REMOVE_FAVOURITE,
    id: id
  }
}

reducers.ts

export function favouriteReducer(
  state = initialState,
  action: favouriteActionTypes
): favouriteState {
  switch (action.type) {
    case ADD_FAVOURITE:
      console.log(`am here in add fav object is: ${action.favourite}`)
      return {
        favourites: [...state.favourites, action.favourite]
      }
    case REMOVE_FAVOURITE:
      return {
        favourites: state.favourites.filter(
          favourite => favourite.id !== action.id
        )
      }
    default:
      return state
  }
}

reducer中的console.log始终返回未定义的对象。

使用按钮调用这些操作的组件如下。 this.props.imageThumbnail是一个有效的对象，正在传递给addFavourite / removeFavourite函数。

component.tsx

const mapState = (state: rootState) => ({
  favourites: state.favourites
})

const mapDispatch = {
  addFavourite: (image: ImageThumbnail) => ({ type: 'ADD_FAVOURITE' }),
  removeFavourite: (id: string) => ({ type: 'REMOVE_FAVOURITE' })
}

//component declaration

//render method

<TouchableOpacity
  onPress={() => this.props.addFavourite(this.props.imageThumbnail)}
/>
<TouchableOpacity
  onPress={() => this.props.removeFavourite(this.props.imageThumbnail.id)}
/>

const connector = connect(
  mapState,
  mapDispatch
)

type PropsFromRedux = ConnectedProps<typeof connector>

export default connector(component)

Answer 1

您没有将图像传递给动作。应该是：

addFavourite: (image: ImageThumbnail) => ({ type: 'ADD_FAVOURITE', favourite: image }),

Answer 2

问题出在您的component.tsx中。您完成的映射应如下所示：

const mapDispatchToProps = (dispatch) => {
    return {
      addFavourite: (image: ImageThumbnail) => (dispatch(addFavourite(image)),
      removeFavourite: (id: string) => (dispatch(removeFavourite(id))
    };
};

，以便将您提供的数据提供给操作。还应该从action.ts中导入addFavorite和removeFavorite。

React Redux未定义对象传递给Reducer

2 个答案: