web-dev-qa-db-ja.com

reduxからのディスパッチが完了した後に関数を呼び出す

その周りはすべてですが、_redux-thunk_および_react-router_のアイデアが十分にあるわけではありませんが、次のような一見シンプルなアイデアは得られません。

アクションがストアへのディスパッチを完了した後、_<Route/>_のhistory.Push('/')を介してプログラムでルートの変更を呼び出します。これはボタンが押されたときに発生します。

_const LoggerRedux = ({stateProp, LogIn}) => {
    return(
      <div>
        <h2>Here is the button. Use this to login</h2>
        <Route render={({ history}) => (
          <button
            type='button'
            onClick={

            //Something that calls {LogIn}
            //and then the history.Push('/')

            }
            >
            Log yo Arse Inn
          </button>
        )}>

        </Route>
      </div>
    )
}

const mapStateToProps = (state) => {
  return {
    stateProp : state
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    LogIn : () => dispatch({
      type : 'AUTHENTICATE'
    }),
    LogOut : (bool) => dispatch({
      type : 'LOGGED_OUT',
      bool
    })
  }
}
const LoginConn = connect( mapStateToProps, mapDispatchToProps)(LoggerRedux);
_

私が言及/タグ付けしたすべてのもののレイマンの説明と例もいいでしょう

reactjsreduxreact-routerreact-reduxredux-thunk
7
KellysOnTop23

アクションクリエーターに約束を返してもらいます。この方法で呼び出すと、.then（）を使用でき、thenハンドラーで新しいアドレスを履歴にプッシュできます。

サンクは通常どおり関数を返しますが、約束は、完了後に行動できるという点で異なります。

例：

static myActionCreator(somevar) {
  return dispatch => {
    return new Promise((resolve, reject) => {
      dispatch({
        type: "myaction",
        something: somevar
      });

      resolve()
    });
  }
}

この場合、サンクはプロミスを返します。次に、このように呼び出すと：

this.props.myActionCreator(somevar)
.then(() => {
  this.props.history.Push('/winning')
})

このサンクはアクションをディスパッチしているだけですが、コールバックなどを含む非同期呼び出しがあり、完了時に解決できます。

25
Hashibuto

このstackoverflowの答えによると、- Reduxの同期または非同期でstore.dispatchです 、reduxディスパッチ機能は同期なので、これを行うことができます：

LogIn();
history.Push("/");
0
Josan Iracheta

私は同様の混乱を経験し、最終的にはreact-reduxのセットアップのためにまったく必要とされないコールバックとjavascriptの約束を通して問題を解決することにかなりの時間を費やしました。

this.props.clearReducersState()
this.props.history.Push('/dashboard')

ClearReducerState（）関数がディスパッチされた後、ダッシュボードにアクセスしようとしました。このコードは問題なく動作します。

何もする必要はありません。react-reduxは同期的に動作するため、単純にこれを行うことができます。履歴を使用することもできます。そのためにもアクションをプッシュします。

import { withRouter } from 'react-router-dom';
this.props.clearReducersState(this.props.history)

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(UpdateAid))

そしてあなたの行動において、

export const clearReducersState = (history) => dispatch => {
history.Push('/dashboard')
}

ただし、リデューサーを使用して状態を更新する場合は、問題を回避するために、インデックスファイルでhistory.Pushを使用することをお勧めします。

要件に応じて使用してください。お役に立てれば。

0
sareek