如何在成功调用 saga api 后重定向

Question

我正在使用 React 16

这个按钮

<form onSubmit={this.submitTechnologyHandler}>
    <div className = "row">
        <Button variant="contained" type="submit" >
            Create
        </Button>
    </div>
</form>

来电

submitTechnologyHandler = ( event ) => {
    event.preventDefault();
...
    this.props.onNameChanged(technology);
}

和

const mapDispatchToProps = dispatch => {
    return {
        onNameChanged: (technology) => dispatch(actions.createTechnology(technology))
    };
};

createTechnology 是动作创作者

export const createTechnology = (technology) => {
    return {
        type: actionTypes.ADD_TECHNOLOGY_START,
        technology: technology
    }
};

这个 Saga 的执行结果是：

export function* newTechnology(action) {
    try{
        const response = yield axios.post("/tech/", action.technology);
        yield console.log("saga/newTechnology", response.data);
        yield put(actions.addTechnology(response.data));

        here I would like to redirect to ('/tech/' + response.data.seoName); if successful
        
    } catch (error) {
        console.log(error)
    }
}

addTechnology 更新商店：

export const addTechnology = (technology) => {
    return {
        type: actionTypes.ADD_TECHNOLOGY,
        technology: technology
    }
};

和

const reducer = (state = initialState, action) => {

    switch (action.type) {
        case actionTypes.ADD_TECHNOLOGY:
            return updateObject(state, action.technology);

那么我如何重定向到 Saga 或 Reducer 中的 url。因为我从服务器获得了一个 id 并且我必须使用它来重定向？

Answer 1

由于您使用 react-router 进行路由，因此您可以使用 react-router-redux 将路由与 redux store 同步。

这篇文章用一个简单的例子来解释它 - https://medium.com/@lavitr01051977/react-router-redux-app-with-call-to-api-70a324c34ecb

Answer 2

我使用 connected-react-router 包修复它

第 1 步：减速器

src/redux/rootReducer.js
import {connectRouter} from 'connected-react-router'
export const rootReducer = history => combineReducers({
   router: connectRouter(history),
   technology: technologyReducer
});

第 2 步：存储

src/redux/store.js

import { routerMiddleware } from 'connected-react-router';

export const history = createBrowserHistory({ basename: '/metro' });

const middleware = [
  ...getDefaultMiddleware({
    immutableCheck: false,
    serializableCheck: false,
    thunk: true
  }),
  sagaMiddleware,
  routerMiddleware(history)
];

const store = configureStore({
  reducer: rootReducer(history),
  middleware,
  devTools: process.env.NODE_ENV !== "production",
  enhancers: [reduxBatch]
});

第 3 步：应用 ConnectedRouter

src/app/App.js 将 BrowserRouter 替换为 ConnectedRouter

import {ConnectedRouter} from 'connected-react-router';
import {history} from '../redux/store'
<Provider store = {store}>
   <ConnectedRouter history = {history} >
      <PersistGate persistor = {persistor} loading = {<LayoutSplashScreen/>}>
         <React.Suspense fallback = {<LayoutSplashScreen/>}>
               <MaterialThemeProvider>
                  <I18nProvider>
                     <Routes/>
                  </I18nProvider>
               </MaterialThemeProvider>
         </React.Suspense>
      </PersistGate>
   </ConnectedRouter>
</Provider>

用法

传奇：src/dev_road/store/sagas/technology.js

import { push } from 'connected-react-router';
export function* newTechnology(action) {
   try{
      const response = yield axios.post("/tech/", action.technology);

      yield put(actions.addTechnology(response.data));

      yield put(push(`/technology/${response.data.seoName}`));

   } catch (error) {
      console.log(error)
   }
}

https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-navigate-with-redux-action

如何在成功调用 saga api 后重定向

How to redirect after successful saga api call

redirect

reactjs

react-router

redux

redux-saga