Errors when adding sidenotes to existing web application

[JessieJiang1011]

I'm trying to add sidenotes to an existing web app.

The store is set up like this:

const reducer = combineReducers({
    reducers: storeReducer, // original reducers
    sidenotes: sidenotes.reducer,
})

const store = createStore(reducer, initialState,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

And the implementation part is as following:

const deselect = () => store.dispatch(actions.deselectSidenote('article'));
store.dispatch(actions.connectAnchor('article', 'red'));
...
<article id='article' onClick={deselect}>
  <AnchorBase anchor='anchor'>
    <p>
    Content with <InlineAnchor sidenote='red' >inline reference</InlineAnchor>
    </p>
  </AnchorBase>
  <div className="sidenotes">
    <Sidenote sidenote='red' base='anchor'> 
      <div style={{ width: 280, height: 150, backgroundColor: 'blue' }} /> 
    </Sidenote>
  </div>
</article>

I got following errors:

Uncaught Error: Actions must be plain objects. Instead, the actual type was: 'function'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions.

Uncaught ReferenceError: process is not defined
    at 4043 (<anonymous>:2:13168)
    at r (<anonymous>:2:306599)
    at 8048 (<anonymous>:2:9496)
    at r (<anonymous>:2:306599)
    at 8641 (<anonymous>:2:1379)
    at r (<anonymous>:2:306599)
    at <anonymous>:2:315627
    at <anonymous>:2:324225
    at <anonymous>:2:324229
    at e.onload (index.js:1:1)

How can I solve this kind error?