1つのアクションで2つの場所でredux状態を更新します。

Question

私はwebshopを構築していますが、いくつかの問題を抱えています。私は購入ボタンをクリックすると、私が起こるには、3つの事柄たい：

• をReduxの状態（shoppingcartReducer）に製品を追加
• 更新Reduxの状態での合計と量（shoppingcartReducer）
• アウトレンダリング私のshoppingCart.jsの合計と数量 コンポーネント

問題はshoppingcartReducerにあります。 1つのアクションで2つの異なるパスで状態を更新する方法はわかりません。ここで

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

私は「製品/ articleNr」パスとデータを操作していますが、私はまた、「./」での合計と数量を更新したいと考えています。

私の考えていた代替案は、ショッピングカートの中に何らかのミドルウェアを置くことですが、これが正しいかどうか、本当に分かりません。

私はすべての助けに感謝します、ありがとう！

---

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

これは機能しました！