React Redux 未定义对象传入 Reducer答案

【问题标题】：React Redux Undefined Object Passed into the ReducerReact Redux 未定义对象传入 Reducer
【发布时间】：2021-01-02 02:13:58
【问题描述】：

我正在使用 typescript 编写我的第一个 React Redux 应用程序，但我遇到了一个特殊错误，即 reducer 接收的对象是“未定义”。

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)

【问题讨论】：

标签： typescript react-native redux react-redux

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

问题出在您的 component.tsx 中。你做的映射应该是这样的：

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

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

【讨论】：