web-dev-qa-db-ja.com

React-Router v4 + Redux-Sagaナビゲーション

認証プロセスが成功した後（ログイン/登録後）にユーザーを移動しようとしていますが、インターネットで見つけたすべての解決策（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')のようなものを使用しようとしました。

すべての助けは高く評価されます。

少し更新-私は今このエラーを受け取っています enter image description here

reactjsreact-reduxredux-sagareact-router-redux
7
Rachomir

React-router-reduxが完全に設定されていません（ https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux ）

あなたが必要です

  • ConnectedRouter
  • ルーターレデューサー
  • ルーターミドルウェア

そうでなければ、reduxはプッシュアクションをどうするかを知りません-レデューサーやミドルウェアはそのアクションを知らないので、彼らはそれを無視します。

2
Alex

history パッケージからcreateHistoryを使用できます。それをreact-routerに渡し、sagasでアクセスします。

/** history.js ****/
import {createBrowserHistory} from 'history'

export default createBrowserHistory({your_config_here})

/** saga.js ***/
import {... call} from 'redux-saga/effects'
import history from './history'
export default function* your_root_saga(){
  ...access history here or in your sub sagas...
  yield call([history, history.Push], 'your_object_path')
}


/** index.js ****/
import history from './history'
import {Router, ...} from 'react-router-dom'
import your_root_saga from './sagas'
import {createSagaMiddleware} from 'redux-saga'

const sagaMiddleware = createSagaMiddleware()
...config_your_store_here...
sagaMiddleware.run(your_root_saga)


render( <Router history = {history}> ... </Router>
, document.getElementById('elementId'))
4
欧阳维杰

RouterReducerを追加するのを忘れたようです-これを試してください：

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose,
  combineReducers  // need this to add the routerReducer
} from 'redux'
import createSagaMiddleware from 'redux-saga'
import {
  ConnectedRouter,
  routerMiddleware,
  routerReducer // you need the router reducer
} 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(
  combineReducers({...rootReducer, router: routerReducer}),
  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')
)
0
JizoSaves