Redux-Devtools обрабатывает временную шкалу навигации

Question

Я заканчиваю тестовое приложение, чтобы попробовать некоторые расширенные возможности React. Мое приложение работает, но я хотел иметь возможность перемещаться вперед и назад по временной шкале redux-devtools. Я могу видеть действие в истории, но я не могу вернуться с этими инструментами. Это хорошо работает для моих пользовательских действий.

Я на 99% уверен, что мы можем сделать это с Redux-devtools, поэтому я думаю, что забыл реализацию чего-то где-то (Да!).

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import { Provider } from "react-redux"
import Store from "./Store"

ReactDOM.render(
    <Provider store={Store}>
        <App />
    </Provider>, 
    document.getElementById('root'))
registerServiceWorker()

App.js

import React, { Component } from 'react'
import Home from "./components/Home";
import About from "./components/About";
import Post from "./components/Post";
import Header from './components/Header'

import { history } from "./Store";
import { Route } from 'react-router'
import { ConnectedRouter as Router} from 'react-router-redux'

// CSS Bulma
import 'bulma/css/bulma.css'

class App extends Component {
    render() {
        return (
            <Router history={history} >
                <div>
                    <Header />

                    <Route exact path="/" component={Home} />
                    <Route exact path="/about" component={About} />
                    <Route exact path="/post/:id" component={Post} />
                </div>


            </Router>
        )
  }
}

export default App

Header.js -> где я обрабатываю кнопку навигации

import React from 'react'
import { Link } from 'react-router-dom'

const Header = () => {
    return (
        <div>
            <nav className="navbar is-black" aria-label="main navigation">
                <div className="navbar-brand">

                    <Link className="navbar-item" to="/">
                        <img src="https://tctechcrunch2011.files.wordpress.com/2016/02/giphyseriesc.gif?w=100" alt="Giphy Logo" width="100" height="30" />
                    </Link>
                </div>
                <div className="navbar-menu">
                    <div className="navbar-start">              
                        <Link className="navbar-item" to="/">
                            Home
                        </Link>
                        <Link className="navbar-item" to="/about">
                            About
                        </Link>
                        <Link className="navbar-item" to="/post/0">
                            Post
                        </Link>
                    </div>
                </div>
            </nav>
        </div>
    )
}

export default Header

Остальные - это мои компоненты класса / состояния для самого приложения, и они не связаны с маршрутизатором.

Редактировать:

Как просили:

Store.js

import { createStore, applyMiddleware, compose } from "redux"
import thunk from 'redux-thunk'
import rootReducer from "./reducers"
import { composeWithDevTools } from 'redux-devtools-extension'; // Redux-devTools

// React Router + Redux link
import { routerMiddleware } from 'react-router-redux'
import createHistory from 'history/createBrowserHistory'

export const history = createHistory()

const enhancers = []
const middleware = [
    thunk,
    routerMiddleware(history)
]

// if (process.env.NODE_ENV === 'development') {
//  const devToolsExtension = window.devToolsExtension

//  if (typeof devToolsExtension === 'function') {
//      enhancers.push(devToolsExtension())
//  }
// }

const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
)



const Store = createStore(
    rootReducer,
    composeWithDevTools(
        composedEnhancers
    )

)

export default Store

Answer 1

Вы имеете в виду историю / маршрутизацию действий? С помощью инструментов разработчика вы можете только синхронизировать изменения состояния без побочных эффектов. Так что он не будет обновлять историю и маршрут, который является состоянием / побочным эффектом браузера.