還元反応の結果に応じてReactコンポーネントを更新する方法

Question

入力を含むReactコンポーネントがあります。コンポーネントはAPIを呼び出すreduxアクションを送出します。コンポーネントごとに "SUCCESS"メッセージを表示したいのですが、減速機以外の方法でメッセージを取得する方法はありませんか？しかし、私が減速機でそれをやろうとしたら、それはフォームのコンポーネントをすべて更新する一般的なメッセージに過ぎませんでしたか？

// COMPONENT

export default class Stock extends React.Component { 


constructor(props) { 
    super(props); 

    this.state = { 
     value: "", 
     id: this.props.hit['Name of Item'], 
    } 
    } 

handleChange(e){ 
    e.preventDefault(); 
    this.setState({value: e.target.value}); 
} 

handleClick(e){ 
    e.preventDefault(); 
    this.props.dispatch(updatePosStock(this.state.value, this.state.id)); 
} 

render() { 

    return (
      <div className="item"> 
       <p>{this.props.hit['Name of Item']}: {this.props.hit.Quantity}</p> 
       <p>Stock ID: {this.props.hit.objectID}</p> 
       <div className="control"> 
       <input className="input" value={this.state.value} type="text" onChange={this.handleChange.bind(this)} /> 
       <a href="" onClick={this.handleClick.bind(this)} >save</a> 

       //MESSAGE TO DISPLAY HERE DEPENDING ON handleClick 

       </div> 
      </div> 
     ) 
    } 
} 

// ACTION

export function updatePosStock(product, stock){ 
return function(dispatch) { 
    axios.post('/api/v1/product/', { 
     product, 
     stock 
    }) 
    .then((response) => { 
     //console.log(response.data); 
     return response.data; 
     //dispatch({type: 'FETCH_PRODUCT_FULFILLED', payload: response.data}) 
    }) 
    .catch((error) => { 
     console.log(error); 
    }) 
} 
} 

Answer 1

私は理解していれば、このコンポーネントは、ページ上で複数回レンダリングされ、あなたがいずれかにアクションをトリガーする場合、メッセージが全員に配布されます。

：コンポーネント（それはコンポーネント間の区別できないためである

だから、私はのようなものにするためにメッセージを設定したいです

[{ 
    message: 'Success', 
    item: itemId 
}, 
...] 

とAPIにデータを送信するとき、私はそれが送信されている項目についてお送りしたいとちょうどその場所で、あなたが

{this.displayMessage(messagesVar, index) || ''} 

を入れてメッセージを表示したい場合は、メッセージアレイにこのメッセージをプッシュします

したがって、表示メッセージが偽でない場合、メッセージを表示します。

あなたのレデューサーが更新するものです。

表示メッセージ機能は、SMTのような

(messages, id) => { 
    currentComponentMsgs = messages.filter((item) => item.id === id); 
    return currentComponentMsgs.length > 0 
      ? currentComponentMsgs.mat((item) => item.message).reduce((a,b) => a + ', ' + b} 
      : ''); 
    } 

である私はそれならば、すべての作品をチェックする時間を持っていなかったが、あなたが伝播した場合、各のIDは、あなたも中に複数のメッセージレコーダーを持つことができ、このパターンを使用して、適切にelemnt messagesVar、それはコンポーネントのメールボックスの一種として役立ちます。すべてのコンポーネントで使用できます。

Answer 2

あなたはこのような状態を定義することができます。この場合、配列

の形で自分の応答メッセージ（例えば「成功」）を保存この

1を実現することができる2つの方法がありますfeedback: [],などです。そして、あなたはこのよう

... 
//dispatch({type: 'FETCH_PRODUCT_FULFILLED', payload: [ product : response.data]}) 
.. 

は、その後、あなたのコンポーネントにあなたがあなたのコンポーネントへのあなたの状態をインポートする方法に応じて

... 
<input className="input" value={this.state.value} type="text" onChange={this.handleChange.bind(this)} /> 
<a href="" onClick={this.handleClick.bind(this)} >save</a> 

//MESSAGE TO DISPLAY HERE DEPENDING ON handleClick 
<p className="feedback">{this.props.feedback[this.state.value] || ''}</p> 

を以下くださいメッセージを設定します。

2例inputKeyのためのあなたのReduxの状態にあるかthis.state={} 内部の別のプロパティを作成します。次にinputKeyの値をhandleClick(e, inputKeyValue) に設定します。inputKeyを3番目のパラメータとして渡した関数に渡し、上記のように表示します。

あなたの州をすべてレビュックスで扱うことを強くお勧めします。this.stateとthis.setState()はできるだけ避けてください。

私はそれが役に立ちそうです。あなたの行動のための

Answer 3

使用コールバック：このため

handleClick(e){ 
    e.preventDefault(); 
    this.props.dispatch(updatePosStock(this.state.value, this.state.id, 
    (code, message)=>{if (code==='OK')this.setState({displayMessage:true, message:"Successfully saved"})})); 
} 

///ACTION 
export function updatePosStock(product, stock, callback){ 
return function(dispatch) { 
    axios.post('/api/v1/product/', { 
     product, 
     stock 
    }) 
    .then((response) => { 
     callback('OK') 
     return response.data; 
     //dispatch({type: 'FETCH_PRODUCT_FULFILLED', payload: response.data}) 
    }) .catch((error) => { callback(error.code, error.message) 
     console.log(error); 
    }) 
} 
}