Question

周围的一切，但并不完全像我对redux-thunk和react-router的想法一样，但我没有得到这个看似简单的想法：

在操作完成调度到商店后，通过<Route/>＆＃39; 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);

Layman解释和我提到/标记的所有事情的例子也很不错

Answer 1

让您的动作创建者返回承诺。这样当你调用它时，你可以使用.then（），然后在你的处理程序中你可以将一个新地址推送到历史记录。

Thunks会正常返回函数，但承诺的不同之处在于您可以在完成后执行操作。

示例：

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

      resolve()
    });
  }
}

所以在这种情况下，你的thunk返回一个promise。然后当你这样调用时：

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

这个thunk只是调度一个动作，但是你可以在那里有一个具有回调等的异步调用，你就可以在完成时解决。

Answer 2

我认为您正在寻找的是 Redux Saga 。

您可以使用 TakeEvery 效果，该效果将在每次调用特定操作时触发所需的功能。

示例：

import { takeEvery } from `redux-saga/effects`

function* fetchUser(action) {
  ...
}

function* watchFetchUser() {
  yield takeEvery('USER_REQUESTED', fetchUser)
}

看看doc和阅读此article

Answer 3

我想在此强调这一部分......

<Route render={({ history}) => (
  <button
    type='button'
    onClick={

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

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

</Route>

您想要调用Login并将历史记录推送到应用程序的根目录。你有几个选择：

在您的登录功能中调用函数history.push('/')，这看起来在您的reducer AUTHENTICATE函数中。
在成功验证后调度调用history.push的操作 查看redux-promise或redux-saga，redux-thunk有点棘手，但可能

我暂时不会尝试以任何其他方式执行此操作，因为您依赖于登录（通过redux调用，因此我希望将逻辑保留在那里，甚至虽然它是客户端重定向。）

Answer 4

根据这个stackoverflow答案：Is store.dispatch in Redux synchronous or asynchronous，redux调度函数是同步的，因此你可以这样做：

LogIn();
history.push("/");

Answer 5

我也有类似的困惑，最终花了很多时间通过回调和JavaScript Promise解决问题，由于react-redux的设置，这根本不需要。

tmp.cc:14:12: error: use of undeclared identifier 'c'
    return c;
           ^
1 error generated

在我调度了clearReducerState（）函数之后，我试图进入仪表板。这段代码可以正常工作。

您无需执行任何操作react-redux以同步方式工作，因此您只需执行此操作即可。您也可以在操作中使用history.push

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

在您的行动中，

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

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

但是，如果要使用化简器更新状态，最好在索引文件中使用history.push以避免出现问题。

根据您的要求使用。希望这会有所帮助。

从redux发送完成后调用函数

5 个答案: