acdlite / acdlite/redux-router

Order of other middleware

Đang mở
#87 9 bình luận 0 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
JavaScript
Star
2.3k
Fork
194
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

Not sure if this is just a gotcha to be documented or an actual issue...

**TLDR** I needed to put `thunk` and `promise` middleware before the router and I had to put my `logger` middleware before AND after the router (and make sure I only log the same action once). This is due to the router `historyMiddleware` not calling next() (which is probably correct).
## Before

I'm creating my store with the following code. With my middleware chain before the router, everything works fine except I don't get any logging of `@@reduxReactRouter/historyAPI` actions, which is totally predictable because if the historyMiddleware catches one of those it triggers a state change and the rest of the middleware does not fire. This is not a problem per-se but my preference is to log **all** actions during development so I can really see whats going on in the app.

**store.js**

``` js
import {createStore, applyMiddleware, compose} from 'redux'
import {reduxReactRouter} from 'redux-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import transducers from './transducers'
import reducers from './reducers'
import middleware from './middleware'

let devTools = () => next => (reducer, initialState) => next(reducer, initialState) // noop
if ((process.env.NODE_ENV === 'development') && (window.localStorage.getItem('DEVTOOLS') === 'enabled')) {
devTools = require('redux-devtools').devTools
}

const initialState = {}

const store = compose(
applyMiddleware.apply(null, middleware),
reduxReactRouter({createHistory: createBrowserHistory}),
devTools()
)(createStore)(transducers(reducers), initialState)

// Enable Webpack hot module replacement for reducers.
if (module.hot) {
module.hot.accept('./reducers', () => {
const nextRootReducer = require('./reducers/index')
store.replaceReducer(transducers(nextRootReducer))
})
}

export default store
```

**transducers/index.js**

``` js
import {compose} from 'redux'
import history from './history'

export default compose(
history
)
```

**reducers/index.js**

``` js
import {combineReducers} from 'redux'
import account from './account'
import comic from './comic'
import feed from './feed'
import notifications from './notifications'
import router from './router'

const reducers = {
account,
comic,
feed,
notifications,
router
}
const combined = combineReducers(reducers)
```

**middleware/index.js**

``` js
import logger from './logger'
import crashReporter from './crashReporter'
import promise from './promise'
import thunk from './thunk'
import validationErrors from './validationErrors'
import {batchedUpdatesMiddleware} from 'redux-batched-updates'

const middleware = [
crashReporter,
promise,
thunk,
logger,
validationErrors,
batchedUpdatesMiddleware
]

export default middleware
```
## After

To accommodate my logging needs, I split my middleware into a 'before' chain and an 'after' chain like so:

**middleware/_before.js**

``` js
import crashReporter from './crashReporter'
import promise from './promise'
import thunk from './thunk'
import logger from './logger'

const middleware = [
crashReporter,
promise,
thunk,
logger
]

export default middleware
```

**middleware/_after.js**

``` js
import logger from './logger'
import validationErrors from './validationErrors'
import {batchedUpdatesMiddleware} from 'redux-batched-updates'

const middleware = [
logger,
validationErrors,
batchedUpdatesMiddleware
]

export default middleware
```

**middleware/logger.js**
I added a check to make sure the same action doesn't get logged twice.

**store.js (changes)**

``` js
const store = compose(
applyMiddleware.apply(null, beforeMiddleware),
reduxReactRouter({createHistory: createBrowserHistory}),
applyMiddleware.apply(null, afterMiddleware),
devTools()
)(createStore)(transducers(reducers), initialState)
```

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.