하나의 동작으로 두 곳에서 redux 상태를 업데이트하십시오.

Question

웹샵을 구축 중이며 몇 가지 문제가 있습니다. 내가 원하는 구매 버튼을 클릭하면 세 가지 일이 :

• 가 REDUX 상태로 제품을 추가 (shoppingcartReducer)
• 업데이트를
• 밖으로 렌더 REDUX 상태에서 합계 수량 (shoppingcartReducer를) 내 shoppingCart.js의 합계 및 수량 구성 요소

문제는 shoppingcartReducer에 있습니다. 하나의 작업에서 두 ​​가지 다른 경로로 상태를 업데이트하는 방법을 모릅니다.

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

여기서 나는 '제품/articleNr'경로와 조작 데이터,하지만 나는 또한의 합계 수량을 업데이트하려고합니다 './'.

내가 생각한 대안은 shoppingcartAction에서 일종의 미들웨어를 사용하는 것일 수도 있지만,이게 옳은지 또는 어떻게해야하는지 정말 모르겠다!

감사합니다. 감사합니다.

---

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

이것은 효과가 있습니다.