Getting & modifying the app state

Inkdrop uses Redux, an implementation of Facebook's Flux Application Architecture to coordinate the movement of data through the application.

Flux is extremely well suited for applications that support third-party extension because it emphasizes loose coupling and well defined interfaces between components. It enforces:

  • Uni-directional data flow
  • Loose coupling between components

For more information about the Flux pattern, check out this diagram.

You can access the app state via inkdrop.store.getState().

Actions

You can dispatch the internal actions like so:

import { actions } from 'inkdrop'

inkdrop.store.dispatch(actions.books.update())

See a list of available actions in reference.

States

To get the current app state, for example, you can get editingNote like so:

const { editingNote } = inkdrop.store.getState()

Or, to connect this state with your React component:

import { useSelector } from 'react-redux'

const selector = ({ editingNote }) => editingNote

const MyComponent = props => {
  const editingNote = useSelector(selector)
  // render
}

See a list of available states in reference.

Can you help us improve the docs? 🙏

The source of these docs is here on GitHub. If you see a way these docs can be improved, please fork us!