redux에서 상태를 업데이트하는 더 나은 방법은 무엇입니까?

Question

저는 React/Redux에서 새롭게 변경했습니다. redux에서 상태를 업데이트하는 더 나은 방법은 무엇인지 알아내는 데 도움이 될까요? 내 감속기 또는 많은 경우에 일련의 동작을 호출하고 상태를 관리 할 수 ​​있습니다. 반응 구성 요소에서 상태를 관리하고 감속기 하나에서만 상태를 업데이트하기 위해 하나의 동작 만 호출 할 수 있습니다.

// 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 나는 동일한 파일에 무슨 일이 일어나고 있는지 볼 수있는 더 나은 것 같다,하지만 난이 올바른 방법입니다 확실하지 않다.

는

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

그런 다음 구성 요소는 소품을 사용할 수있다 : 두 번째 PARAM로

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

패스이 다음과 같이 저장하는 구성 요소를 연결하는 동안 다음과 같이

Answer 1

당신은 더 나은 ActionCreators를 사용해야합니다 액션 구성자를 호출하는 actionCreator1 : 일부 구성 파일에서 다음 정의가있는 addItemAC :

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

기본적으로 코드를 깨끗하게 정리하는 데 도움이됩니다.

Answer 2

그냥 Redux's official document에서 모범 사례를 사용하십시오.

간단히 말하면, 우리는 Store 데이터 변경의 모든 복잡성을 캡슐화하기 위해 Actions과 ActionCreators을 사용합니다.