Блог

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

Живая демонстрация: https://react-7qfrxx.stackblitz.io

Воспроизведение:

1. Откройте ссылку выше
2. Выберите frontend из списка. При появлении списка выберите reactjs снова.
3. Вы увидите изменения URL (добавляет subreddit)
4. Теперь нажмите кнопку назад в браузере и вперед.
5. Вы увидите, что URL-адрес меняется, но содержимое остается прежним.

Живой редактор: https://stackblitz.com/edit/react-7qfrxx

AsyncApp.js В Line 36 :

 this.props.dispatch(push('/'   nextSubreddit))
 

Как я могу показать предыдущее или следующее кэшированное / состояние пользователю при нажатии назад / вперед? Может ли кто-нибудь отредактировать мое онлайн-приложение, чтобы показать мне правильный путь? Я пытаюсь решить эту проблему с 2 дней и безуспешно.

Мне нужно сделать это без обновления страницы. (асинхронный)

Предыдущее решение не сработало, так что вот мой обновленный ответ: я думаю, вам лучше всего прослушать LOCATION_CHANGE тип действия connected-react-router и отправить вам selectSubreddit там. Использование LOCATION_CHANGE не задокументировано в connected-react-router проекте, однако в документах старого проекта react-router-redux упоминается об этом.

На самом деле мы можем создать функцию промежуточного программного обеспечения для достижения этой цели:

 import { LOCATION_CHANGE } from 'connected-react-router'
import { selectSubreddit } from './actions';

export const listenRouteMiddleware = ({ dispatch, getState }) => (next) => (action) => {
  if (action.type === LOCATION_CHANGE) {
    const { pathname } = action.payload.location;
    if (pathname !== '/') {
      const pathArray = pathname.split('/');
      const selectSub = pathArray[pathArray.length - 1];
      next(action); // before dispatch, otherwise history breaks
      dispatch(selectSubreddit(selectSub));
      return;
    }
  }
  next(action);
}
 

Затем добавьте его в другое промежуточное программное обеспечение:

 import thunkMiddleware from 'redux-thunk'

import { createBrowserHistory } from 'history'
import { applyMiddleware, compose, createStore } from 'redux'
import { routerMiddleware } from 'connected-react-router'
import createRootReducer from './reducers'
import { listenRouteMiddleware } from './middleware';
export const history = createBrowserHistory()

export default function configureStore(preloadedState) {
  const store = createStore(
    createRootReducer(history), // root reducer with router state
    preloadedState,
    compose(
      applyMiddleware(
        listenRouteMiddleware,
        routerMiddleware(history), // for dispatching history actions
        thunkMiddleware
        // ... other middlewares ...
      ),
    ),
  )

  return store
}
 

Измените обработчик изменений, чтобы только нажимать новый URL-адрес при выборе опции:

 handleChange(nextSubreddit) {
  this.props.dispatch(push('/'   nextSubreddit))
}
 

Вот и все! Чтобы увидеть рабочий пример, ознакомьтесь с: Редактор, приложение

Вам нужно извлекать данные на основе маршрута, а не состояния. При выборе выпадающего списка измените только маршрут. Вы можете использовать connected-react-router для прослушивания изменения URL. При изменении маршрута он будет извлекать данные на основе маршрута.

 function mapStateToProps(state) {
  var { selectedSubreddit, postsBySubreddit } = state;

  // Listen to the connected-react-router API for URL change.
  selectedSubreddit = state.router.location.pathname === "/" ? "reactjs" : state.router.location.pathname.split("/")[1];

  const { isFetching, lastUpdated, items: posts } = postsBySubreddit[
    selectedSubreddit
  ] || {
    isFetching: true,
    items: []
  }

  return {
    selectedSubreddit,
    posts,
    isFetching,
    lastUpdated
  }
}
 

Вот вилка.
https://stackblitz.com/edit/react-wxfdea

Вот исправленное приложение. https://react-wxfdea.stackblitz.io

URL-адреса обновляются.

Проблема с вашим текущим решением заключается в том, что вы сохраняете значение selectedSubreddit состояния в двух местах — Redux и url. Такого рода дублирования состояний, как правило, следует избегать. Вы используете connected-react-router библиотеку, поэтому у вас пока не так много проблем, но в более крупном приложении с подобными вещами может быть довольно сложно справиться.

Также у вас есть два маршрута в вашем приложении, /frontend и /reactjs , но вы не определяете какие-либо <Route/> компоненты.

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

 <Router>
  <>
    <Route exact path="/frontend" component={SubReddit}/>
    <Route exact path="/reactjs" component={SubReddit}/>
  </>
</Router>
 

А затем в componentDidMount of <SubReddit/> вы просто проверяете location prop, который маршрутизатор предоставляет для выбранного в данный момент subreddit. Тогда переход на другой subreddit — это просто вопрос навигации ( <Link/> для этого используйте компонент react-router). Таким образом, URL-адрес становится источником истины для выбранного в данный момент subreddit.

Redux полностью излишен для простого управления списком сообщений subreddit, но достаточно справедлив, если это упражнение, чтобы использовать его для практики.

Причина, по которой это не работает для вас, заключается в том, что вы читаете только имя subreddit из состояния Redux и не просматриваете URL-адрес. На самом деле вы можете получить URL-адрес из состояния, посмотрев на местоположение в маршрутизаторе.

Таким образом, простое решение заключается в том, чтобы вместо сохранения и чтения selectedSubreddit как отдельной части состояния redux всегда вычислять его на основе URL. Измените свой mapStateToProps вход AsyncApp.js следующим образом:

   const { router, postsBySubreddit } = state;
  const selectedSubreddit = router.location.pathname.substr(1) || 'reactjs';