react-redux-router不会使用分派的事件从saga中导航。安装的中间件

React-Redux-Router是一个用于React应用程序的库，它结合了React、Redux和React Router，用于管理应用程序的状态和导航。

在React-Redux-Router中，使用Redux-Saga作为中间件来处理异步操作和副作用。Redux-Saga是一个用于管理应用程序副作用（例如异步请求、定时器等）的库。

要正确使用分派的事件从Saga中导航，需要按照以下步骤进行操作：

1. 首先，确保已经安装了必要的依赖项。在项目中安装以下库：

• react-redux：用于将React组件连接到Redux存储。
• react-router-dom：用于在React应用程序中进行路由导航。
• redux-saga：用于处理异步操作和副作用。

可以使用以下命令进行安装：

npm install react-redux react-router-dom redux-saga

1. 在Redux存储中配置Redux-Saga中间件。在创建Redux存储时，将Redux-Saga中间件应用于存储。例如：

import { createStore, applyMiddleware } from 'redux';

import createSagaMiddleware from 'redux-saga';

import rootReducer from './reducers';

import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(

 rootReducer,

 applyMiddleware(sagaMiddleware)

);

sagaMiddleware.run(rootSaga);

export default store;

在上面的示例中，createSagaMiddleware函数用于创建Redux-Saga中间件，并将其应用于Redux存储。

1. 在Saga中处理导航事件。在Saga中，可以使用put函数来分派Redux动作，以触发导航。例如：

import { put, takeEvery } from 'redux-saga/effects';

import { push } from 'react-router-dom';

function* navigateSaga() {

 yield put(push('/path')); // 使用push函数分派导航动作

}

function* watchNavigate() {

 yield takeEvery('NAVIGATE', navigateSaga); // 监听NAVIGATE动作并执行导航Saga

}

export default function* rootSaga() {

 yield all([

   watchNavigate()

   // 其他Saga...

 ]);

}

在上面的示例中，navigateSaga函数使用put函数分派push动作，该动作由react-router-dom库提供，用于导航到指定路径。watchNavigate函数使用takeEvery函数监听NAVIGATE动作，并在收到该动作时执行navigateSaga。

1. 在组件中触发导航事件。在React组件中，可以使用dispatch函数来触发导航事件。例如：

import React from 'react';

import { useDispatch } from 'react-redux';

const MyComponent = () => {

 const dispatch = useDispatch();

 const handleNavigation = () => {

   dispatch({ type: 'NAVIGATE' }); // 分派NAVIGATE动作以触发导航

 };

 return (

   <button onClick={handleNavigation}>Navigate</button>

 );

};

export default MyComponent;

在上面的示例中，handleNavigation函数使用dispatch函数分派NAVIGATE动作，以触发导航。

综上所述，通过正确配置Redux-Saga中间件，并在Saga中处理导航事件，可以实现使用分派的事件从Saga中导航。