web-dev-qa-db-ja.com

Reactアクションredux後のルーターリダイレクト

React-reduxと標準のreact-routingを使用しています。明確なアクションの後にリダイレクトが必要です。

例：登録の手順がいくつかあります。そしてアクション後：

function registerStep1Success(object) {
    return {
        type: REGISTER_STEP1_SUCCESS,
        status: object.status
   };
}

彼にregistrationStep2のページにリダイレクトしてほしい。どうやるか？

追伸履歴ブラウザでは、「/ registrationStep2」はこれまでにありませんでした。このページは、結果が正常に登録された後にのみ表示されますStep1ページ。

reactjsreact-routerreduxredux-framework
47
ximet

React Router 2+を使用すると、アクションをディスパッチする場所にかかわらず、browserHistory.Push()（または使用する場合はhashHistory.Push()）を呼び出すことができます。

import { browserHistory } from 'react-router'

// ...
this.props.dispatch(registerStep1Success())
browserHistory.Push('/registrationStep2')

これを使用するのであれば、非同期アクション作成者からもこれを行うことができます。

54
Dan Abramov

react-router-redux をチェックアウトしましたか？このライブラリにより、react-routerをreduxと同期できます。

次に、react-router-reduxからのプッシュアクションでリダイレクトを実装する方法のドキュメントからの例を示します。

import { routerMiddleware, Push } from 'react-router-redux'

// Apply the middleware to the store
const middleware = routerMiddleware(browserHistory)
const store = createStore(
  reducers,
  applyMiddleware(middleware)
)

// Dispatch from anywhere like normal.
store.dispatch(Push('/foo'))
23
Eni Arinde

ルーターバージョン4以降の最もシンプルなソリューション：

初期化された場所からブラウザ履歴をエクスポートし、browserHistory.Push（ '/ pathToRedirect'）を使用します。

パッケージ履歴をインストールする必要があります（例： "history"： "4.7.2"）：

npm install --save history

私のプロジェクトでは、index.jsでブラウザーの履歴を初期化します。

import { createBrowserHistory } from 'history';

export const browserHistory = createBrowserHistory();

アクションのリダイレクト：

export const actionName = () => (dispatch) => {
    axios
            .post('URL', {body})
            .then(response => {
                // Process success code
                  dispatch(
                    {
                      type: ACTION_TYPE_NAME,
                      payload: payload
                    }
                  );
                }
            })
            .then(() => {
                browserHistory.Push('/pathToRedirect')
            })
            .catch(err => {
                // Process error code
                    }
                );
            });
};
4
Jackkobec

Eni Arindeの以前の回答（コメントする評判がありません）に基づいて、非同期アクションの後にstore.dispatchメソッドを使用する方法は次のとおりです。

export function myAction(data) {
    return (dispatch) => {
        dispatch({
            type: ACTION_TYPE,
            data,
        }).then((response) => {
            dispatch(Push('/my_url'));
        });
    };
}

リデューサーには副作用がないはずなので、リデューサーではなくアクションファイルで行うのがコツです。

4
Mathieu Nohet

「react-router-dom」の{ withRouter }を使用できます

以下の例は、プッシュへのディスパッチを示しています

export const registerUser = (userData, history) => {
  return dispatch => {
    axios
    .post('/api/users/register', userData)
    .then(response => history.Push('/login'))
    .catch(err => dispatch(getErrors(err.response.data)));
  }
}

履歴引数は、コンポーネントでアクション作成者への2番目のパラメーターとして割り当てられます（この場合は「registerUser」）

1
milesr

ルーティングアプリの機能 コピー

    import {history, config} from '../../utils'
        import React, { Component } from 'react'
        import { Provider } from 'react-redux'
        import { createStore, applyMiddleware } from 'redux'
        import Login from './components/Login/Login';
        import Home from './components/Home/Home';
        import reducers from './reducers'
        import thunk from 'redux-thunk'

        import {Router, Route} from 'react-router-dom'

        import { history } from './utils';

        const store = createStore(reducers, applyMiddleware(thunk))



        export default class App extends Component {
          constructor(props) {
            super(props);

            history.listen((location, action) => {
              // clear alert on location change
              //dispatch(alertActions.clear());
            });
          }
          render() {
            return (
              <Provider store={store}>
                <Router history={history}>
                  <div>
                    <Route exact path="/" component={Home} />
                    <Route path="/login" component={Login} />
                  </div>
                </Router>
              </Provider>
            );
          }
        }

export const config = {
    apiUrl: 'http://localhost:61439/api'
};
import { createBrowserHistory } from 'history';

    export const history = createBrowserHistory();
//index.js
export * from './config';
export * from './history';
export * from './Base64';
export * from './authHeader';

import { SHOW_LOADER, AUTH_LOGIN, AUTH_FAIL, ERROR, AuthConstants } from './action_types'

import Base64 from "../utils/Base64";

import axios from 'axios';
import {history, config, authHeader} from '../utils'
import axiosWithSecurityTokens from '../utils/setAuthToken'


export function SingIn(username, password){


    return async (dispatch) => {
      if(username == "gmail"){
        onSuccess({username:"Gmail"}, dispatch);
      }else{
      dispatch({type:SHOW_LOADER, payload:true})
        let auth = {
            headers: {
              Authorization: 'Bearer ' + Base64.btoa(username + ":" + password)
            }
          }
        const result = await axios.post(config.apiUrl + "/Auth/Authenticate", {}, auth);
        localStorage.setItem('user', result.data)
        onSuccess(result.data, dispatch);
    }
  }

}

export function GetUsers(){
  return async (dispatch) => {
var access_token = localStorage.getItem('userToken');
    axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}` 

    var auth = {
      headers: authHeader()
    }
    debugger
      const result = await axios.get(config.apiUrl + "/Values", auth);
      onSuccess(result, dispatch);
      dispatch({type:AuthConstants.GETALL_REQUEST, payload:result.data})
  }
}



const onSuccess = (data, dispatch) => {

  const {username} = data;
  //console.log(response);
  if(username){
    dispatch({type:AuthConstants.LOGIN_SUCCESS, payload: {Username:username }});
    history.Push('/');
    // Actions.DashboardPage();
  }else{
    dispatch({ type: AUTH_FAIL, payload: "Kullanici bilgileri bulunamadi" });
  }
  dispatch({ type: SHOW_LOADER, payload: false });
}
const onError = (err, dispatch) => {
  dispatch({ type: ERROR, payload: err.response.data });
  dispatch({ type: SHOW_LOADER, payload: false });
}

export const SingInWithGmail = () => {
  return { type :AuthConstants.LOGIN_SUCCESS}
}

export const SignOutGmail = () => {
  return { type :AuthConstants.LOGOUT}
}
0
FERAMUZ MADENCİ
      signup = e => {
        e.preventDefault();
        const { username, fullname, email, password } = e.target.elements,
          { dispatch, history } = this.props,
          payload = {
            username: username.value,
            //...<payload> details here
          };
        dispatch(userSignup(payload, history));
        // then in the actions use history.Push('/<route>') after actions or promises resolved.
      };

    render() {
       return (
       <SignupForm onSubmit={this.signup} />
        //... more <jsx/>
)
     }
0
Saad Abbasi