ReactJS 使用 redux 正确更新状态

Question

我最近开始使用 reactjs，我需要知道如何正确更新我的状态。

我的动作.js：

export function updateCreateCampaignObject(data) {
  return {
    type: actions.UPDATE_CREATE_CAMPAIGN,
    payload: data,
  }
}

export function updateCampaignProducts(data) {
  return {
    type: actions.UPDATE_CAMPAIGN_PRODUCTS,
    payload: data,
  }
}

export function updateCampaignTarget(data) {
  return {
    type: actions.UPDATE_CAMPAIGN_TARGET,
    payload: data,
  }

我的减速机：

const INITIAL_STATE = {
  campaign_dates: {
    dt_start: '',
    dt_end: '',
  },
  campaign_target: {
    target_number: '',
    gender: '',
    age_level: {
      age_start: '',
      age_end: '',
    },
    interest_area: [],
    geolocation: {},
  },
  campaign_products: {
    survey: {
      name: '',
      id_product: '',
      quantity: '',
      price: '',
    }
  }
}

export default function createCampaignReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case UPDATE_CREATE_CAMPAIGN:
      return { ...state, state: action.payload }

    case UPDATE_CAMPAIGN_PRODUCTS:
      return { ...state, campaign_products: action.payload }

    case UPDATE_CAMPAIGN_TARGET:
      return { ...state, campaign_products: action.payload }

    default:
      return state
  }

在这种情况下，我只想在我的 campaign_products 对象中为数量添加 +1。 我需要为此创建一个动作吗？

我怎样才能在我的组件中调用这个动作，像这样？

import { updateCampaignProducts as updateCampaignProductsAction } 
from '~/store/modules/createCampaign/actions'

  function addQuantity() {
    dispatch(updateCampaignProductsAction({
      survey: {
        quantity: quantity + 1
      }
    }))
  }

Answer 1

还没有测试，但你需要改变这样的事情。 (3个步骤)

1) 将数量更改为数字

  campaign_products: {
    survey: {
      name: '',
      id_product: '',
      quantity: 0,
      price: '',
    }
  }

2）在Reducer中，基于action从当前状态更新状态。 （在您的情况下，不依赖于任何操作有效负载）

export default function createCampaignReducer(state = INITIAL_STATE, action) {   switch (action.type) {
    case UPDATE_CAMPAIGN_PRODUCTS:
      const current_quantity = state.campaign_products.survey.quantity;
      return { ...state, campaign_products: current_quantity + 1}
    default:
      return state   }

3）调度动作

  function addQuantity() {
    dispatch(updateCampaignProductsAction())
  }

Answer 2

您可以使用或不使用挂钩来完成。

无论哪种方式，请阅读有关连接 redux 以进行反应的文档。 React 团队编写了 npm 库来连接它们。