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

您是指历史记录/路由操作吗？使用dev工具，您只能对同步的、无副作用的状态更改进行时间规划。因此，它不会更新历史记录和路由，这是浏览器状态/副作用。