React, Redux - перенаправление после создания объекта (с использованием нового идентификатора объекта в URL)

Question

Я думаю, что у меня довольно распространенная проблема, но я не могу найти актуальный ответ, который, я уверен, является хорошей практикой.

Я пишу приложение для форума, используя React, Redux, React Router ДОМ. Я использую BrowserRouter.

Вот что я хочу сделать: после того, как я отправлю запрос на создание потока и он будет выполнен, я хочу перенаправить пользователя на вновь созданную страницу потока (мне нужен идентификатор объекта, который я получу в ответ для URL).

компонент

class CreateThread extends React.Component {

  handleCreateThread = (values) => {
    this.props.createThread(values);

  [...more code...]
}

действия

export const createThread = (data) => async dispatch => {
  try {
    const response = await instance().post('/api/threads/', data);
    // const { id, category } = response.data;
    // history.push(`/categories/${category.id}/threads/${id}`);
    dispatch({ type: types.CREATE_THREAD_FULFILLED, payload: response.data })
  } catch(err) {
    dispatch({ type: types.CREATE_THREAD_ERRORS, payload: err.response.data })
  }
};

Как лучше всего это сделать? Думаю, проще всего было бы перенаправить внутренние действия. Это хорошая практика? Как я могу получить доступ к объекту истории в этом случае? (Закомментированная часть кода в действиях не работает, я не могу получить доступ к объекту истории таким образом). Я искал ответ, но нашел много неактуальных или противоречивых, и я очень запутался.

------------ ИЗМЕНИТЬ ---- ------

Итак, я последовал совету Ахмада Наваза Хана, но при попытке доступа к history.pu sh внутри создателя действий я получаю сообщение об ошибке TypeError: "_routing__WEBPACK_IMPORTED_MODULE_3__.default.push is not a function"

// routing/history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();

// routing/index.js
import { Router } from 'react-router-dom';
import history from './history';

const Routing = (props) => {
  return (
    <Router history={history}>
      ...

// redux/actions/index.js
import history from '../../routing';

export const createThread = (data) => async dispatch => {
  try {
    const response = await instance().post('/api/threads/', data);    
    const { id, category } = response.data;
    history.push(`/categories/${category.id}/threads/${id}`);
    dispatch({ type: types.CREATE_THREAD_FULFILLED, payload: response.data })
  } catch(err) {
    ...

"история": "^ 4.10.1", "react-router-dom": "^ 5.1.2", "react": "^ 16.12.0"

Answer 1

Если вы создали пользовательский объект истории, вы не можете использовать BrowserRouter, вместо этого вы должны использовать Router, который работает аналогично BrowerRouter, за исключением того, что он принимает настраиваемый объект истории. если не создан)

//history.js
import { createBrowserHistory } from "history";
export default createBrowserHistory();

Измените BrowerRouter на Router

import Router from "react-router-dom";

Импортируйте и передайте объект истории в Маршрутизатор (history.pu sh не будет работать, если у вас нет t передал объект истории маршрутизатору.)

import history from "./history.js"
...
<Router history={history}>

Теперь вы можете перенаправить пользователя из создателя действия или из компонента CreateThread. И да, это хорошая практика - перенаправить пользователя из создателя действия, но если вы хотите сделать это из компонента CreateThread, вам придется вернуть обещание от создателя действия createThread.

Answer 2

Глядя на ваш импорт и использование файлов, я вижу, что проблема здесь просто в неправильном импорте.

Вы определили историю как history.js файл, однако вы пытаетесь импортировать ее из routing/index.js например,

Обновите импорт истории, и он должен работать для вас

// redux/actions/index.js
import history from '../../routing/history.js';

export const createThread = (data) => async dispatch => {
  try {
    const response = await instance().post('/api/threads/', data);    
    const { id, category } = response.data;
    history.push(`/categories/${category.id}/threads/${id}`);
    dispatch({ type: types.CREATE_THREAD_FULFILLED, payload: response.data })
  } catch(err) {
    ...

Answer 3

История. js

import createHistory from 'history/createHashHistory';
export default createHistory()

Действие. js

import history from './history'
history.push('/send to my new page');