reactjs – React-Router v4 Redux-Saga导航
发布时间:2020-12-15 20:11:48 所属栏目:百科 来源:网络整理
导读:我试图在成功的身份验证过程后(登录/注册后)移动用户但是它看起来像我在互联网上找到的每个解决方案 – stackoverflow / github问题/媒体等 – 不起作用! 请在下面找到我的代码. import { call,put,takeLatest } from 'redux-saga/effects'import { push }
我试图在成功的身份验证过程后(登录/注册后)移动用户但是它看起来像我在互联网上找到的每个解决方案 – stackoverflow /
github问题/媒体等 – 不起作用!
请在下面找到我的代码. import { call,put,takeLatest } from 'redux-saga/effects' import { push } from 'react-router-redux' import { USER_LOGIN_SUCCEEDED,USER_LOGIN_FAILED,USER_LOGIN_REQUESTED } from '../actions/types' import { login } from '../api' function * loginUser (action) { try { const token = yield call(login,action.payload.email,action.payload.password) yield put({type: USER_LOGIN_SUCCEEDED,token: token}) yield put(push('/dashboard')) } catch (error) { yield put({type: USER_LOGIN_FAILED,error: error.message}) } } function * loginSaga () { yield takeLatest(USER_LOGIN_REQUESTED,loginUser) } export default loginSaga 不确定是否有必要,但我也会粘贴我的路由器代码 import React from 'react' import { Route } from 'react-router-dom' import { connect } from 'react-redux' import PropTypes from 'prop-types' import ForgotPasswordForm from './components/home-page/ForgotPasswordForm' import LoginForm from './components/home-page/LoginForm' import RegisterForm from './components/home-page/RegisterForm' import ResetPasswordForm from './components/home-page/ResetPasswordForm' import Dashboard from './containers/Dashboard' import HomePage from './containers/HomePage' import PrivateRoute from './helpers/privateRoute' import './index.scss' class App extends React.Component { componentDidMount () { const token = window.localStorage.token if (token) { this.props.dispatch({type: 'USER_LOGIN_SUCCEEDED',token: token}) } } render () { return ( <div> <Route exact path='/' component={HomePage} /> <Route path='/login' component={LoginForm} /> <Route path='/register' component={RegisterForm} /> <Route path='/forgot-password' component={ForgotPasswordForm} /> <Route path='/reset-password/:resetPasswordToken' component={ResetPasswordForm} /> <PrivateRoute path='/dashboard' component={Dashboard} /> </div> ) } } App.propTypes = { dispatch: PropTypes.func.isRequired } export default connect()(App) 最后是index.js代码 import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore,applyMiddleware,compose } from 'redux' import createSagaMiddleware from 'redux-saga' import { ConnectedRouter,routerMiddleware } from 'react-router-redux' import createHistory from 'history/createBrowserHistory' import App from './App.js' import rootReducer from './reducers/rootReducer' import setAuthorizationToken from './helpers/setAuthorizationToken' import loginSaga from './sagas/loginSaga' import registerSaga from './sagas/registerSaga' const sagaMiddleware = createSagaMiddleware() const history = createHistory() const reduxRouterMiddleware = routerMiddleware(history) const store = createStore( rootReducer,compose( applyMiddleware(sagaMiddleware,reduxRouterMiddleware),window.devToolsExtension ? window.devToolsExtension() : f => f ) ) sagaMiddleware.run(registerSaga) sagaMiddleware.run(loginSaga) if (window.localStorage.token) { setAuthorizationToken(window.localStorage.token) } render( <Provider store={store}> <ConnectedRouter history={history}> <App /> </ConnectedRouter> </Provider>,document.getElementById('app') ) 知道为什么它不工作?我还尝试在saga文件中导入browserHistory并使用yield browserHistory.push(‘/ dashboard’)之类的东西 每一个帮助都将受到高度赞赏. 小更新 – 我现在收到此错误 解决方法
你没有完全设置react-router-redux(
https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux)
你需要 > ConnectedRouter 否则redux不知道如何处理推送操作 – 没有reducer或中间件知道该操作,所以他们忽略它. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |