分派推送更改url但不渲染组件

时间:2019-04-24 08:20:48

标签: reactjs redux react-router connected-react-router

因此,基本上,我正在执行登录请求,成功后,我想调度响应并将用户重定向到个人资料页面。

因此分派响应工作正常,但是在执行dispatch(push('/profile'));后,URL会更改,但配置文件组件不会呈现。

如果我只是在没有axios请求的情况下执行以下代码执行,则它可以正常工作并重定向。

export function logIn(values) {
   return (dispatch) => {
     dispatch({ type: LOGIN_USER, payload: {email: values.email} });
     dispatch(push('/profile'));
   };
 }

我想做的实际代码。 分派可以正常工作的响应后,我的redux存储得到了更新,但重定向不起作用。它将网址更改为/ profile,但视图未更改

import axios from 'axios';
import { push } from 'connected-react-router';

const ROOT_URL = `${process.env.REACT_APP_SERVER_PATH}`;
export const LOGIN_USER = 'LOGIN_USER';

export function logIn(values) {
  const url = `${ROOT_URL}/login`;
  const request = axios({
    method: 'POST',
    url: url,
    data: values,
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  });
  return (dispatch) => {
    request.then((response) => {
      dispatch({ type: LOGIN_USER, payload: response.data.user });
      dispatch(push('/profile'));
    })
    request.catch((error) => {
      // do something
    })
  };
}

ConfigStore:

import { createBrowserHistory } from 'history';
import { createLogger } from 'redux-logger';
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/es/storage'
import thunk from 'redux-thunk'
import createRootReducer from './reducers'

export const history = createBrowserHistory();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['auth'] // can eention specific data root name

};

const reducers = persistReducer( persistConfig, createRootReducer(history));

export default () => {
  const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware(routerMiddleware(history), thunk, createLogger()))
  );
  let persistor = persistStore(store)

  return  { store, persistor }
}

0 个答案:

没有答案