用一次动作在两个地方更新REDX状态

问题描述：

我正在建造一个网上商店，并且遇到了一些问题。当我点击购买按钮，我想三件事情发生：用一次动作在两个地方更新REDX状态

产品加入了Redux状态（shoppingcartReducer）
更新的终极版状态的总和，数量（shoppingcartReducer）
呈现出我的shoppingCart.js中的总金额和数量组件

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

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

在这里，我在“产品/ 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)

对于一个动作来说，触发多重状态变化非常容易。您只需使用多个减速器处理相同的操作。你是否使用['combineReducers']（http://redux.js.org/docs/api/combineReducers.html）？ –

多个减速器的工作，谢谢！ – AlfredO

答

这工作！

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

用一次动作在两个地方更新REDX状态

相关推荐