Redux状態 - オブジェクトとそのプロパティの追加/編集/削除

Question

これは減速状態です。 cartDataにオブジェクトを追加、更新、削除する必要があります。初めてcartDataは空です。

const initialState = { 
    fetchData: {}, 
    cartData: {} 
} 

例：

fetchData: { 
    "React":{'name': 'React'}, 
    "Node":{'name': 'Node'}, 
} 

ユーザーADD_ITEMは、新しいアイテムがここにカートに追加された、本を反応させた場合。

cartData:{ 
    "React":{'name': 'React', 'quantity': 1}, 
} 

ユーザーEdit_ITEMは、既存のアイテムがここに更新され、本を反応させた場合。

cartData:{ 
    "React":{'name': 'React', 'quantity': 4}, 
} 

ユーザーREMOVE_ITEMがここにゼロに来たときに削除し、本を反応させた場合。

cartData:{ 

} 

これらのアクションの還元状態を変更するにはどうすればよいですか？

試しましたlodashを使用しています。しかし、正しく機能しませんでした。

case types.ADD_ITEM: 
    return { ...state, cartData: // add new item } 

case types.EDIT_ITEM: 
    return { ...state, [state.cartData.name]: action.payload } 

case types.REMOVE_ITEM: 
    return _.omit(state, [state.cartData.name]: action.payload) 

Answer 1

削除項目のaddとedit項目とObject.keys()とreduce()のためのスプレッド構文を使用することができます。

const initialState = { 
 
fetchData: {}, 
 
cartData: {} 
 
} 
 

 
function cartReducer(state = initialState, action) { 
 
    switch(action.type) { 
 
    case 'ADD_ITEM': 
 
    return {...state, cartData: {...state.cartData, ...action.payload}} 
 
    
 
    case 'EDIT_ITEM': 
 
    return {...state, cartData: {...state.cartData, ...action.payload}} 
 
    
 
    case 'REMOVE_ITEM': 
 
    let newState = Object.keys(state.cartData).reduce((r, e) => { 
 
     if(!action.payload[e]) r[e] = state.cartData[e]; 
 
     return r 
 
    }, {}) 
 
    
 
    return {...state, cartData: newState} 
 
    
 
    default: 
 
    return state; 
 
    } 
 
} 
 

 
var state = {} 
 

 
state = cartReducer(undefined, { 
 
    type: 'ADD_ITEM', 
 
    payload: {"React":{'name': 'React', 'quantity': 1}} 
 
}) 
 
console.log(state) 
 

 
state = cartReducer(state, { 
 
    type: 'ADD_ITEM', 
 
    payload: {"Node":{'name': 'Node', 'quantity': 2}} 
 
}) 
 
console.log(state) 
 

 
state = cartReducer(state, { 
 
    type: 'EDIT_ITEM', 
 
    payload: {"React":{'name': 'React', 'quantity': 4}} 
 
}) 
 
console.log(state) 
 

 
state = cartReducer(state, { 
 
    type: 'REMOVE_ITEM', 
 
    payload: {"React":{'name': 'React', 'quantity': 1}} 
 
}) 
 
console.log(state)

Answer 2

アクションで

：減速で

const editData = (items) => (dispatch) => { 
     dispatch({type: 'EDIT_ITEMS', payload: items}); 
} 

：

const reducer = (state = INITIAL_STATE, action){ 
    case 'EDIT_ITEMS': { 
     if(_.isEmpty(action.payload)){ 
       return { 
         ...state, 
         cartData: {}, 
       }; 
     } else { 
       return { 
         ...state, 
         cellData: action.payload, 
       }; 
     } 
    } 
} 

これはそれを行うための方法でなければなりません。​​は、あなたがいつでもカートに入れたすべてのアイテムでなければなりません。

は、[EDIT：]質問が編集されていたよう 、また、deletingキーを使用して

// Ref: https://github.com/erikras/react-redux-universal-hot-example/issues/962#issuecomment-219354496 
export const removeByKey = (object, deleteKey) => { 
    return Object.keys(object) 
    .filter(key => key !== deleteKey) 
    .reduce((result, current) => { 
     result[current] = object[current]; 
     return result; 
    }, {}); 
}; 

case types.REMOVE_ITEM: 
    return { ...state, cartData: deleteKey(cartData, action.payload)) } 

Answer 3

を使用すると、それはあなたがしようとしている内容を正確に把握するのは難しいことを行うことができます。以下は、カートに追加メソッドを使用した減速機能の例です。シナリオごとに同様のメソッドを追加する必要があります。

export function reducer(state = initialState, action: any): State { 
    switch(action.type) { 
     case "ADD_TO_CART": { 
      return { 
       fetchData: state.fetchData, 
       cartData: Object.assign({}, state.cartData, action.payload} 
      }; 
     } 
    } 
    default: { 
     return state; 
    } 
} 

その後、ディスパッチ関数を呼び出すことによってアクションを派遣します：

dispatch({ 
    type: "ADD_TO_CART", 
    payload: "React":{'name': 'React', 'quantity': 1} 
})