reactjs - 通过一个操作在两个地方更新 redux 状态

Question

我正在建立一个网上商店，但遇到了一些问题。当我点击购买按钮时，我希望发生三件事:

• 将产品添加到 redux 状态 (shoppingcartReducer)
• 更新 redux 状态下的总和和数量 (shoppingcartReducer)
• 渲染出我的 shoppingCart.js 中的总和和数量 组件

问题出在 ShoppingcartReducer 上。我不知道如何在一个操作中更新两个不同路径中的状态。

return state
            .setIn(['products', action.articleNr], addArticle(action, state))

这里我位于“products/articleNr”路径中并操作数据，但我还想更新“./”中的总和和数量。

所以我想到的替代方案可能是在 ShoppingcartActions 中添加某种中间件，但我真的不知道这是否正确，也不知道该怎么做!

感谢所有的帮助，谢谢!

---

购物车 reducer :

import Immutable from 'seamless-immutable'

import { addToShoppingcart, createShoppingCart } from '../actions/shoppingcartActions'

const ADD_TO_SHOPPINGCART = 'ADD_TO_SHOPPINGCART'
const CREATE_SHOPPING_CART = 'CREATE_SHOPPING_CART'

const initialState = Immutable({
  sum: 0,
  quantity: 0
})

export default function shoppingcartReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TO_SHOPPINGCART:
      return state
        .setIn(['products', action.articleNr], addArticle(action, state))

    case CREATE_SHOPPING_CART:
      return state
        .set(action.id, createCart(action))
  }
  return state
}

function addArticle(action, state) {
  return {
    product: action.product
  }
}

function createCart(action) {
  return {
    id: action.id,
  }
}

购物车操作:

let nextTodoId = 0

const ADD_TO_SHOPPINGCART = 'ADD_TO_SHOPPINGCART'
const CREATE_SHOPPING_CART = 'CREATE_SHOPPING_CART'

export function addToShoppingcart(product) {
  return {
    type: ADD_TO_SHOPPINGCART,
    articleNr: product.articleNr,
    product: product,
  }
}

export function createShoppingCart() {
  return {
    type: CREATE_SHOPPING_CART,
    id: 'productNr:'+nextTodoId++,
  }
}

ShoppingCart.js:

import React, { Component } from 'react'

import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as shoppingcartActions from '../../actions/shoppingcartActions'

class ShoppingCart extends Component {

  componentWillMount() {
    this.state = {
      shoppingcartReducer: []
    }
  }

  componentWillReceiveProps(nextProps) {  
    this.setState({
      shoppingcartReducer: nextProps.shoppingcartReducer ? nextProps.shoppingcartReducer : ''
    })
  }

  render() {
    const { shoppingcartReducer } = this.props
    const { sum, quantity } = shoppingcartReducer

    return (
      <div className="shoppingCart">
          <ul>
            <li>Summa: {sum} :-</li>
            <li>Antal varor: {quantity}</li>
          </ul>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    shoppingcartReducer: state.shoppingcartReducer
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(shoppingcartActions, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(ShoppingCart)

Answer 1

这成功了!

export function addProduct(product) {
  return {
    type: ADD_PRODUCT,
    articleNr: product.articleNr,
    product: product,
  }
}

export function addSummary(product) {
  return {
    type: ADD_SUMMARY,
    product: product
  }
}

export function addToShoppingcart(product) {
    return (dispatch) => {
            dispatch( addProduct(product))
            dispatch( addSummary(product))
    }
}