React, Redux를 사용하여 항목 목록 업데이트 중. 및 Redux 양식

Question

말 작업 추가가 완료된 후 어떻게 말 목록을 업데이트합니까?

createHorse 작업이 완전히 완료되기 전에 CreateHorse의 reloadHorseList가 실행 중이므로 때로는 목록에 새 말이 표시되는 경우가 종종 있습니다. 전체 다시로드는 항상 업데이트를 표시합니다.

말 구성 요소

... 
import { getHorses } from '../../actions'; 
import ListHorses from './ListHorses'; 
import CreateHorse from './forms/createHorseForm'; 

class Horses extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     ... 
    }; 
    this.reloadHorseList = this.reloadHorseList.bind(this); 
    } 

    componentDidMount() { 
    this.reloadHorseList(); 
    } 

    reloadHorseList() { 
    this.props.getHorses(this.props.current_user.selected_stable); 
    } 

    render() { 
    return (
     <div className="content page-content-wrapper1"> 

     <CreateHorse 
      current_user={this.props.current_user} 
      reloadHorseList={this.reloadHorseList} 
     /> 
     <ListHorses 
      current_user={this.props.current_user} 
      horses={this.props.horses} 
     /> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    horses: state.horses 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators(
    { 
     getHorses: getHorses 
    }, 
    dispatch 
); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Horses); 

만들기 말 양식

... 
import { Field, reduxForm, getFormValues } from 'redux-form'; 
import { 
    createHorse, 
    getHorseSelect, 
    updateHorseCount 
} from '../../../actions'; 
import { connect } from 'react-redux'; 

const renderField = (... 
); 

class CreateHorse extends Component { 
    constructor(props) { 
    super(props); 
     this.state = { 
     ... 
    }; 
    this.setMessage = this.setMessage.bind(this); 
    } 


    onSubmit(props) { 
    //let p = this.props.reloadHorseList; 
    try { 
     this.props.createHorse(props, this.setMessage); 

     //running before I have finished creating my horse 
     this.props.reloadHorseList(); 

    } catch (err) { 
     ... 
    } 
    } 


    render() { 
    const { handleSubmit } = this.props; 

    return (
     <div> 
     ... 
     {this.state.displayHorseCreateForm && (
      <div> 
      <h4 className="header-content">Add Horse</h4> 
      <p> * required field</p> 

      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 

       // fields here 

       <button type="submit" className="btn btn-primary"> 
       Submit 
       </button> 
      </form> 
      </div> 
     )} 
     </div> 
    ); 
    } 
} 
function validate(values) { 
... 
} 

function mapStateToProps(state) { 
    --- 
} 

export default connect(mapStateToProps, { 
    createHorse, 
    getHorseSelect, 
    updateHorseCount 
})(
    reduxForm({ 
    form: 'HorseCreatetForm', 
    initialValues: { 
     ... 
    }, 
    validate 
    })(CreateHorse) 
); 

//create horse action 
export const createHorse = (props, setMessage) => async dispatch => { 
    try { 
    const request = await axios.post(`/api/horse/create`, props); 
    return { 
     type: CREATED_HORSE, 
     payload: request.data 
    }; 
    } catch (err) { 
    ... 
    } 
}; 

ListHorses

... 
import { deleteHorse } from '../../actions'; 

class HorsesList extends React.Component { 

    render() { 
    let horses = this.props.horses; 
    let horseCount = this.props.horse_count; 
    return (
     <div className="content"> 
     horse count: {horseCount} 
     <ul className="list-inline box-body"> 
      {horseCount > 0 && 
      horses.map((horse, key) => (
       <li key={key}> 
       ...//listing here 
       </li> 
      ))} 
     </ul> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    horse_count: state.horse_count 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators(
    { 
     ... 
    }, 
    dispatch 
); 
} 

export default connect(mapStateToProps, mapDispatchToProps)(HorsesList); 

Answer 1

나에게 도움이되는 해결책은 CreateHorse 구성 요소에 콜백을 보내어 getHorses에 대한 Horse 구성 요소 액션을 실행하는 createHorse 액션으로 보내는 것입니다. CreateHorse의 컴포넌트 createHorse 액션

export const createHorse = (
    props, 
    setMessage, 
    reloadHorses 
) => async dispatch => { 
    try { 
    const request = await axios.post(`/api/horse/create`, props); 

    reloadHorses(); 

    return { 
     type: CREATED_HORSE, 
     payload: request.data 
    }; 
    } catch (err) { 
    ... 
    } 
}; 

Answer 2

당신은이 시점에서 실제 코드를 게시해야합니다. 구성 요소 다시 렌더링을 트리거하려면 상태를 변경해야합니다. 귀하의 소품을 redux에서 로컬 상태로 설정하고 목록을 렌더링하는 것이 좋습니다. 또한 componentWillRecieveProps()를 사용해야합니다.

componentDidMount() { 
    this.reloadHorseList(); 
    this.setState=({list: this.props.horseList}); 
    } 

componentWillRecieveProps(nextProps){ 
    this.setState=({list: nextProps.horseList}) 
} 

당신은 구성 요소가 먼저로드가 완료 당신의 가정에서 정확합니다. 따라서 구성 요소 WillRecieveProps 라이프 사이클 후크를 사용해야합니다.

mapStateToProps()를 redux와 함께 사용하는 경우 mapStateToProps() 내의 내용이 변경되면 구성 요소가 다시 렌더링되어야합니다.