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 - ＆gt;我在哪里处理导航按钮

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

你的意思是历史/路由行动？使用开发工具，您只能时间同步，无副作用状态更改。所以它不会更新历史和路线，这是浏览器状态/副作用。

Redux-Devtools处理导航时间线

1 个答案: