web-dev-qa-db-ja.com

ディスパッチ関数の戻り値の取得

私は反応するのが初めてです。コンポーネントとアクション機能を分離してみました。しかし、別のアクション関数から戻り値を取得できません。ディスパッチ関数から値（オブジェクト{}など）を返すことは可能ですか？

私は簡単なコードを以下のように置きます：

LoginComponent.js

class Login extends React.Component {
   constructor(props){
      super(props)
      this.state = {
         username : '',
         password : ''
      }
   }
   submit = (e) => {
      /* console.logging "Some response"*/
      console.log(this.props.doLogin(this.state))
   }
   render(){
      return (
         <form onSubmit={this.submit}>/* some login element */</form>
      )
   }
}

export default connect(null, {LoginAction})(Login);

LoginAction.js

export function doLogin(state){
   return dispatch => {
      return axios.post('login', state).then(res =>{

      return "Some response";

    })
   }
}

しかし、それは値を返しません

ありがとうございました。

reactjsreact-reduxredux-thunk
6
Angger

上記の答えとは逆に、実際にはサンクから好きなものを返すことができます。 Redux-thunkはそれを通過します。

あなたの場合、サンクが_Promise<string>_を返している場合、それは、コンポーネント内でthis.props.doLogin(this.state)も_Promise<string>_に評価されることを意味します。

したがって、Promiseをログに記録する代わりに、そのログコードをthis.props.doLogin(this.state).then(result => console.log(result);に切り替えてみてください。

5
casieber

Redux-thunkを使用している場合、関数を返すことはオプションではありません。コールバックを実行し、アクションオブジェクトとして渡したものをすべてディスパッチします。したがって、API呼び出しを実行したいので、それが成功か失敗かを確認します。あなたは成功に向けて派遣し行動する必要があります。 redux状態で保存します。コンポーネントのデータにアクセスします

export function doLogin(state){
   return dispatch => {
      axios.post('login', state).then(res =>{
       dispatch({
        data:  "Some response",
        type: "API_SUCCESS"
       })
       })
       .catch(err) {
       dispatch({
        data:  err,
        type: "API_FAILURE"
       })
       }
}

そして、このようにコンポーネント内のこれらの値にアクセスします

mapStateToProps = (state) => ({
data: state.yourreducer.data,
})
define mapDispatchToProps if you need dispatcch binded functions
export default(mapStateToProps, mapDispatchToProps)(YourComponent)
1
simbathesailor