reduxで非同期アクションをインターセプト

Question

私はreduxと反応してシンプルなノートアプリケーションを構築しています。私のノートを作成し、アクション、次のようになります

import axios from "axios"; 

const URL = 'http://localhost:3002/api/'; 

export function createNote(data = {}) { 
    return { 
     type: 'CREATE_NOTE', 
     payload: axios.post(URL + 'notes/', data), 
    }; 
} 

そして、私は私の減速に次のように持っている：

// Create 
    case 'CREATE_NOTE_PENDING': 
    { 
     return { 
      ...state, 
      creating: true 
     }; 
    } 

    case 'CREATE_NOTE_FULFILLED': 
    { 
     return { 
      ...state, 
      creating: false, 
      notes: action.payload.data 
     }; 
    } 

    case 'CREATE_NOTE_REJECTED': { 
     return { 
      ...state, 
      creating: false, 
      error: action.payload 
     }; 
    } 

そして、これが私のノートクラスです：いいえの

function mapStateToProps(store) { 
    return { 
     data: store.note.notes, 
     fetching: store.note.fetching, 
     creating: store.note.creating, 
     error: store.note.error, 
    }; 
} 

class Notes extends Component { 

    componentWillMount() { 
     this.props.dispatch(fetchNotes()); 
    } 

    create() { 
     this.props.dispatch(createNote({ 
      title: this.refs.title.value, 
      content: this.refs.content.value, 
     })); 

     this.refs.title.value = ''; 
     this.refs.content.value = ''; 
    } 

    render() { 
     return (
      <div className="App"> 
       <h1 className="text-center">Notepad</h1> 
       <div className="row"> 

        <div className="col-md-6 col-md-offset-3"> 
         <div className="form-group"> 
          <input ref="title" placeholder="Create a note" className="form-control" disabled={this.props.creating} /> 
         </div> 
         <div className="form-group"> 
          <textarea ref="content" className="form-control" disabled={this.props.creating} /> 
         </div> 
         <button onClick={this.create.bind(this)} 
           type="submit" 
           className="btn btn-primary" 
           style={{float: 'right'}} 
           disabled={this.props.creating} >Save</button> 
        </div> 

       </div> 

作成サーバーからの応答を取得してフォーム内のコンテンツをリセットするまで、フォームを無効にします。私の質問はです。応答がになったとき、つまりフォームが有効になっているときにフォームの内容をリセットするにはどうすればいいですか？

Answer 1

入力およびテキストエリアの内容を制御するには、制御されたコンポーネントを使用する必要があります。これは、例えば、価値属性を提供することである。入力

<input value={this.state.title} placeholder="Create a note" className="form-control" disabled={this.props.creating} /> 

値には内部状態または還元状態を使用できます。次に、setStateアクションまたはreduxアクションによって値を制御できます。