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アクションに送信することです。

class Horses extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     horses: this.props.horses, 
    }; 
    this.reloadHorses = this.reloadHorses.bind(this); 
    } 

    componentDidMount(prevProps) { 
    this.props.getHorses(this.props.current_user.selected_stable); 
    } 

    reloadHorses =() => { 
    this.props.getHorses(this.props.current_user.selected_stable); 
    }; 

    ... 

    <CreateHorse 
    current_user={this.props.current_user} 
    reloadHorses={this.reloadHorses} 
    /> 
    <ListHorses 
    horses={this.props.horses} 
    /> 

... 

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

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

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

は、CreateHorseコンポーネント

onSubmit(props) { 

     this.props.createHorse(props, this.setMessage, this.props.reloadHorses); 

    } 
    } 

に続いて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}) 
} 

コンポーネントが最初に読み込まれることを前提としています。したがって、componentWillRecievePropsライフサイクルフックを利用する必要があります。

mapStateToProps（）をreduxで使用している場合は、mapStateToProps（）内のものが変更されたときにコンポーネントを再レンダリングする必要があります。