Javascript ReactJS-从reducer返回单个项的操作

这里的目标是从我的组件中调用一个操作，并从reducer中获取单个对象，然后使用该对象，我将加载我的表单

Redux正在工作，但它返回了我想要作为整个状态的单个对象

我的组件：

const dispatch = useDispatch()

const rewardFromRedux = dispatch(getProductForUpdateAction('reward', rewardIdForUpdate))

// After getting the information from redux, I will load my component state like this:
const [title, setTitle] = useState(rewardFromRedux ? rewardFromRedux.title : '')
const [about, setAbout] = useState(rewardFromRedux ? rewardFromRedux.about : '')

// receives a product type (survey, reward) and the productId
// and call action to get the product from the reducer

export function getProductForUpdate(productType, productId) {
  switch (productType) {
    case 'reward':
      return {
        type: actions.GET_REWARD_FOR_UPDATE,
        payload: productId,
      }

    default:
      return null
  }
}

case GET_REWARD_FOR_UPDATE:
   return produce(state, draft => {
     const rewardIndex = draft.campaign_products.reward.rewards.findIndex(
       p => p.uuid === action.payload,
     )
     if (rewardIndex >= 0) {

       // the problem is here, is returning the item that I want but as my whole state
       // state.campaign_products.reward.rewards is my array of reward objects

       return state.campaign_products.reward.rewards[rewardIndex]
     }
   })

我的行动：

const dispatch = useDispatch()

const rewardFromRedux = dispatch(getProductForUpdateAction('reward', rewardIdForUpdate))

// After getting the information from redux, I will load my component state like this:
const [title, setTitle] = useState(rewardFromRedux ? rewardFromRedux.title : '')
const [about, setAbout] = useState(rewardFromRedux ? rewardFromRedux.about : '')

// receives a product type (survey, reward) and the productId
// and call action to get the product from the reducer

export function getProductForUpdate(productType, productId) {
  switch (productType) {
    case 'reward':
      return {
        type: actions.GET_REWARD_FOR_UPDATE,
        payload: productId,
      }

    default:
      return null
  }
}

case GET_REWARD_FOR_UPDATE:
   return produce(state, draft => {
     const rewardIndex = draft.campaign_products.reward.rewards.findIndex(
       p => p.uuid === action.payload,
     )
     if (rewardIndex >= 0) {

       // the problem is here, is returning the item that I want but as my whole state
       // state.campaign_products.reward.rewards is my array of reward objects

       return state.campaign_products.reward.rewards[rewardIndex]
     }
   })

我的减速机：

const dispatch = useDispatch()

const rewardFromRedux = dispatch(getProductForUpdateAction('reward', rewardIdForUpdate))

// After getting the information from redux, I will load my component state like this:
const [title, setTitle] = useState(rewardFromRedux ? rewardFromRedux.title : '')
const [about, setAbout] = useState(rewardFromRedux ? rewardFromRedux.about : '')

// receives a product type (survey, reward) and the productId
// and call action to get the product from the reducer

export function getProductForUpdate(productType, productId) {
  switch (productType) {
    case 'reward':
      return {
        type: actions.GET_REWARD_FOR_UPDATE,
        payload: productId,
      }

    default:
      return null
  }
}

case GET_REWARD_FOR_UPDATE:
   return produce(state, draft => {
     const rewardIndex = draft.campaign_products.reward.rewards.findIndex(
       p => p.uuid === action.payload,
     )
     if (rewardIndex >= 0) {

       // the problem is here, is returning the item that I want but as my whole state
       // state.campaign_products.reward.rewards is my array of reward objects

       return state.campaign_products.reward.rewards[rewardIndex]
     }
   })

---

如何仅返回所需的对象？

创建然后使用

选择器

选择器

export const getRewardByIndex = (rewardIndex) => (state) => {
  return state.campaign_products.reward.rewards[rewardIndex];
};

在您的组件中

import { useSelector } from 'react-redux';

const someIndex = 0;
const reward = useSelector(getRewardByIndex(someIndex));