在 React 和 Redux 中删除页面/路由后重定向答案

【问题标题】：Redirecting after deleting page / route in React and Redux在 React 和 Redux 中删除页面/路由后重定向
【发布时间】：2018-10-17 16:45:21
【问题描述】：

作为使用 react、react-router 和 redux 的练习，我正在制作一个非常小的应用程序，它有两种模型：vacuum 和 store。在我的应用程序中，您可以查看所有吸尘器、所有商店、单个吸尘器或单个商店。您可以从单个页面视图中添加和删除吸尘器和商店的实例。

我遇到的问题是，在删除真空或商店后，我的应用程序中断，因为路线不再存在。

我尝试添加 NotFound 组件和路由，但因为我在路由 (/vacuums/:id) 内使用变量，所以它确实到达了那里。

<Switch>
   <Route exact path="/stores" component={Allstores} />
   <Route exact path="/stores/add" component={storesAddForm} />
   <Route exact path="/stores/:storeId" component={Singlestores} />
   <Route exact path="/vacuums" component={Allvacuums} />
   <Route exact path="/vacuums/add" component={vacuumsAddForm} />
   <Route exact path="/vacuums/:vacuumsId" component={Singlevacuums} />
   <Route component={NotFound} />
</Switch>

使用 redux 删除函数：

export const REMOVE_VACUUM = 'REMOVE_VACUUM';

export const removeVacuum = vacuumId => {
  return {
    type: REMOVE_VACUUM,
    vacuumId: vacuumId,
  };
};

const deleteVacuum = id => {
    return async (dispatch, getState) => {
       const deleted = await axios.delete(`/api/allVacuums/${id}`);
       dispatch(removeVacuum(id));
    };
};

const rootReducer = (state = initialState, action) => {
      switch (action.type) {
        case REMOVE_VACUUM:
             const arr = state.vacuums.filter(
                   vacuum => vacuum.id !== action.vacuumId
                   );
             return { ...state, vacuums: arr };
      }
}

【问题讨论】：

能否提供删除功能码？您应该在删除项目后立即以编程方式重定向
您可以在组件中使用componentDidUpdate 进行条件渲染（例如，您可以将this.state.vacuums 与nextState.vacuums 进行比较）。如果比较不相等，您可以将isLoading 状态设置为true 以显示Loading... 元素，同时检查是否存在任何其他真空数据（如果存在，则更新this.state.vacuums 并设置@ 987654330@ 到 false) ...或者跳过条件渲染并简单地将用户重定向回主页。

标签： javascript reactjs react-redux react-router

【解决方案1】：

由于您使用的是 redux，因此从您的 Singlevacuums 组件将 this.props.history 从组件传递给您的 deleteVacuum 动作创建者：

import React, { PureComponent } from 'react';
import { deleteVacuum } from '../actions/vacuumActions';

class Singlevacuums extends PureComponent {

  handleClick = id => {
    const { deleteVacuum, history } = this.props;

    deleteVacuum(id, history); // delete vacuum action action creator
  }

  render = () => (
    <div>
    {this.props.vacuums.map(({ id }) => (
      <button id={id} onClick={() => this.handleClick(id)}>Delete Vacuum</button>
    ))}
    </div>
  )
}

export default connect(state=> ({ vacuums: state.vacuums }), { deleteVacuum })(Singlevacuums)

然后在你的动作创建者中（总是try/catch你的承诺，否则，当他们失败时——他们会——你的应用程序不会崩溃！！！）：

const deleteVacuum = (id, history) => async dispatch => {
    try {
       await axios.delete(`/api/allVacuums/${id}`); // remove vacuum from API
       dispatch(removeVacuum(id)); // remove vacuum from redux state
       history.push('/'); // redirect user to "/" or where ever 
    catch (err) {
       console.error(err);
    }
};

【讨论】：