History

source code: https://github.com/huangbinjie/react-router-ractor

Like redux router, we want the router also to react message after system dispatch a new message rather than directly call the history api. this section let's to implement a graceful history store.

Step1.

Define the HistoryStore:

import { History, Location, createBrowserHistory,  UnregisterCallback } from "history"

export const history = createBrowserHistory()

export class HistoryStore extends Store<HistoryStoreState> {
  public state = { location: history.location, history }
  private unlisten: UnregisterCallback

  public preStart() {
    this.unlisten = history.listen(location => {
      this.setState({ location })
    })
  }

  public postStop() {
    this.unlisten()
   }

  public createReceive() {
    return this.receiveBuilder()
      .match(Go, go => history.go(go.n))
      .match(GoBack, () => history.goBack())
      .match(GoForward, () => history.goForward())
      .match(Push, push => history.push(push.path, push.state))
      .match(Replace, replace => history.replace(replace.path, replace.state))
      .build()
   }
 }

Step2.

Mount HistoryStore to system

import { Provider } from "ractor-react"
import { Router } from "react-router"
import { history, HistoryStore } from "./HistoryStore"

<Provider system={system} stores={[HistoryStore]} >
  <Router history={history}>
    <App />
  </Router>
</Provider>

Step3.

Dispatch a router message. That's all.

system.dispatch(new Push("/"))