reduxで状態を更新する方が良い方法はありますか？

Question

私はReact/Reduxで新しいです。私はreduxの状態を更新するためのより良いアプローチは何かを理解するのを助けますか？ 多くのケースでは、私の減速機や多くの場合、状態を管理することができます。リアクションコンポーネントで状態を管理し、1つのアクションだけを呼び出して状態を更新することができます。

// Option #1 
const reducer = (state = {items: [], counter: 0, someAnotherData: {}}, action) => { 
    switch (action.type) { 
     case ADD_ITEM: { 
      const updatedItems = state.items.concat(action.payload); 
      return Object.assign({}, state, {items: updatedItems}); 
     } 
     case REMOVE_ITEM: { 
      const updatedItems = state.items.filter(e => e.id !== action.payload); 
      return Object.assign({}, state, {items: updatedItems}); 
     } 
    } 
    // cases for counter and someAnotherData 
}; 

// component 
render() { 
    // ... 
    <Button onClick={() => dispatch({type: 'ADD_ITEM', payload: item})}> 
     Add 
    </Button> 
    <Button onClick={() => dispatch({type: 'REMOVE_ITEM', payload: id})}> 
     Remove 
    </Button> 
    {...} 
} 

// Option #2 
const reducer = (state = {items: [], counter: 0, someAnotherData: {}}, action) => { 
    switch (action.type) { 
     case 'UPDATE_DATA': 
      return Object.assign({}, state, action.payload); 
     // no more cases 
     default: 
      return state; 
    } 
}; 

// component 
addItem = (item) => { 
    const updatedItems = this.props.items.concat(item); 
    this.props.dispatch({type: 'UPDATE_DATA', payload: {items: updatedItems}}); 
} 

removeItem = (id) => { 
    const updatedItems = this.props.items.filter(e => e.id !== id); 
    this.props.dispatch({type: 'UPDATE_DATA', payload: {items: updatedItems}}); 
} 

render() { 
    // ... 
    <Button onClick={() => this.addItem(item)}> 
     ADD 
    </Button> 
    <Button onClick={() => this.removeItem(id)}> 
    REMOVE 
    </Button> 
    {...} 
} 

私の場合、＃2の方が同じファイルで何が起こっているかを見ることができますが、これは正しい方法であるかどうかはわかりません。

次のようにあなたがより良い ActionCreatorsを使用する必要があります

Answer 1

次のように保存するために、あなたのコンポーネントを接続している間

function mapActionsToProps(dispatch) { 
    return { 
     actionCreator1:() => dispatch(updateDataAC()) 
    }; 
} 

は、第二のparamとしてこれを渡します

export default connect(mapStateToProps, mapActionsToProps)(ComponentName); 

を次に、あなたのコンポーネントにあなたが小道具を利用することができますアクションクリエータを呼び出すactionCreator1：いくつかの設定ファイルで次の定義を持つaddItemAC：

export const addItemAC =() => ({ 
    type: 'ADD_ITEM' 
}); 

これは、基本的にコードをきれいに整理して整理するのに役立ちます。

Answer 2

Redux's official documentのベストプラクティスを使用してください。

簡単に言えば、とActionCreatorsを使用して、すべての複雑さをStoreのデータ変更でカプセル化します。