对react-router使用redux-saga

Question

我有一个关于react-router的问题:例如，在成功调用创建api (使用redux-saga)后，我想从Create form重定向到Edit form。在这种情况下，我应该如何使用react-router？

Answer 1

如果还包含react-router-redux，您可以简单地将页面更改视为从saga调用的另一个redux操作(使用新的push应用程序接口)。

就像..。

yield put(push('your/route'))

Answer 2

您不需要添加另一个包来实现此功能。我个人避免使用额外的包。你要做的就是通过ALl对象将history对象传递给saga。

假设我有一个登录组件，如果登录成功，我想导航：

登录组件:从react-redux导入{ connect }；从react-router-dom导入{ withRouter }；

const SignIn = ({ emailSignInStart, googleSignInStart, history }) => { 
   const [userCredentials, setCredentials] = useState({
    email: "",
    password: "",
  });
  const { email, password } = userCredentials;

  const handleSubmit = async (event) => {
    event.preventDefault();
    emailSignInStart({ email, password, history });
  };
   
   return (
    ......JSX HRE
    )
  }

  export default withRouter(connect(null, mapDispatchToProps)(SignIn));

如果这是一个组件而不是一个页面，为了传递"history“对象，请用withRouter对其进行包装，因为它是功能组件

然后在saga函数中，您将可以访问其有效负载包含history对象的操作对象。

export function* signInWithEmail({ payload }) {
  try {
    console.log("I am in signin with email saga", payload.email);
    const { email, password, history } = payload;
    // an example for firebase authentication
    const { user } = yield auth.signInWithEmailAndPassword(email, password);
    yield getSnapshotFromUserAuth(user);
    history.push("/");
  } catch (error) {
    yield put(signInFailure(error));
  }
}