Question

我正在建立一个网店，我遇到了一些问题。当我点击购买按钮时，我想要做三件事：

将产品添加到redux状态（shoppingcartReducer）
更新redux状态（shoppingcartReducer）中的总和数量
在shoppingCart.js中渲染总和和数量成分

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

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

这里我在'products / articleNr'路径和操作数据，但我也想更新'./'中的总和和数量。

所以我想到的替代方案可能是在shoppingcartActions中有某种中间件，但我不知道这是不对的，也不知道怎么做！

感谢所有的帮助，谢谢！

shoppingcartReducer：

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,
  }
}

shoppingcartActions：

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))
    }
}

通过一个操作在两个位置更新redux状态

1 个答案: