From 4333826cabfefad55e3f63dc489d3b297cab0805 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Thu, 28 Jan 2016 19:13:55 +0000 Subject: [PATCH] Reflect Redux 3.1.0 changes in the README --- README.md | 33 ++++++++++--------- examples/counter/package.json | 14 ++++---- .../counter/src/store/configureStore.dev.js | 6 ++-- .../counter/src/store/configureStore.prod.js | 6 ++-- examples/todomvc/package.json | 12 +++---- examples/todomvc/store/configureStore.dev.js | 6 ++-- 6 files changed, 39 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 33591a8a..0c51f44b 100644 --- a/README.md +++ b/README.md @@ -81,7 +81,7 @@ const DevTools = createDevTools( The `DevTools` component you created with `createDevTools()` has a special static method called `instrument()`. It returns a [store enhancer](http://rackt.github.io/redux/docs/Glossary.html#store-enhancer) that you need to use in development. -A store enhancer is a function that takes `createStore` and returns an enhanced version of it that you will use instead. You probably already used another store enhancer—[`applyMiddleware()`](http://redux.js.org/docs/api/applyMiddleware.html). Unlike `applyMiddleware()`, you will need to be careful to only use `DevTools.instrument()` in development environment, and never in production. +A store enhancer is a function that enhances the behavior of `createStore()`. You can pass store enhancer as the last optional argument to `createStore()`. You probably already used another store enhancer—[`applyMiddleware()`](http://redux.js.org/docs/api/applyMiddleware.html). Unlike `applyMiddleware()`, you will need to be careful to only use `DevTools.instrument()` in development environment, and never in production. The easiest way to apply several store enhancers in a row is to use the [`compose()`](http://redux.js.org/docs/api/compose.html) utility function that ships with Redux. It is the same `compose()` that you can find in Underscore and Lodash. In our case, we would use it to compose several store enhancers into one: `compose(applyMiddleware(m1, m2, m3), DevTools.instrument())`. @@ -94,15 +94,17 @@ import { createStore, applyMiddleware, compose } from 'redux'; import rootReducer from '../reducers'; import DevTools from '../containers/DevTools'; -const finalCreateStore = compose( +const enhancer = compose( // Middleware you want to use in development: applyMiddleware(d1, d2, d3), // Required! Enable Redux DevTools with the monitors you chose DevTools.instrument() -)(createStore); +); export default function configureStore(initialState) { - const store = finalCreateStore(rootReducer, initialState); + // Note: only Redux >= 3.1.0 supports passing enhancer as third argument. + // See https://github.com/rackt/redux/releases/tag/v3.1.0 + const store = createStore(rootReducer, initialState, enhancer); // Hot reload reducers (requires Webpack or Browserify HMR to be enabled) if (module.hot) { @@ -121,14 +123,14 @@ If you’d like, you may add another store enhancer called `persistState()`. It // ... import { persistState } from 'redux-devtools'; -const finalCreateStore = compose( +const enhancer = compose( // Middleware you want to use in development: applyMiddleware(d1, d2, d3), // Required! Enable Redux DevTools with the monitors you chose DevTools.instrument(), // Optional. Lets you write ?debug_session= in address bar to persist debug sessions persistState(getDebugSessionKey()) -)(createStore); +); function getDebugSessionKey() { // You can write custom logic here! @@ -182,14 +184,13 @@ if (process.env.NODE_ENV === 'production') { import { createStore, applyMiddleware, compose } from 'redux'; import rootReducer from '../reducers'; -const finalCreateStore = compose( - // Middleware you want to use in production: - applyMiddleware(p1, p2, p3), - // Other store enhancers if you use any -)(createStore); +// Middleware you want to use in production: +const enhancer = applyMiddleware(p1, p2, p3); export default function configureStore(initialState) { - return finalCreateStore(rootReducer, initialState); + // Note: only Redux >= 3.1.0 supports passing enhancer as third argument. + // See https://github.com/rackt/redux/releases/tag/v3.1.0 + return createStore(rootReducer, initialState, enhancer); }; ``` @@ -201,14 +202,14 @@ import { persistState } from 'redux-devtools'; import rootReducer from '../reducers'; import DevTools from '../containers/DevTools'; -const finalCreateStore = compose( +const enhancer = compose( // Middleware you want to use in development: applyMiddleware(d1, d2, d3), // Required! Enable Redux DevTools with the monitors you chose DevTools.instrument(), // Optional. Lets you write ?debug_session= in address bar to persist debug sessions persistState(getDebugSessionKey()) -)(createStore); +); function getDebugSessionKey() { // You can write custom logic here! @@ -218,7 +219,9 @@ function getDebugSessionKey() { } export default function configureStore(initialState) { - const store = finalCreateStore(rootReducer, initialState); + // Note: only Redux >= 3.1.0 supports passing enhancer as third argument. + // See https://github.com/rackt/redux/releases/tag/v3.1.0 + const store = createStore(rootReducer, initialState, enhancer); // Hot reload reducers (requires Webpack or Browserify HMR to be enabled) if (module.hot) { diff --git a/examples/counter/package.json b/examples/counter/package.json index ca9c6a67..38bd610f 100644 --- a/examples/counter/package.json +++ b/examples/counter/package.json @@ -16,11 +16,11 @@ }, "homepage": "https://github.com/gaearon/redux-devtools#readme", "dependencies": { - "react": "^0.14.0", - "react-dom": "^0.14.0", - "react-redux": "^4.0.0", - "redux": "^3.0.0", - "redux-thunk": "^1.0.0" + "react": "^0.14.6", + "react-dom": "^0.14.6", + "react-redux": "^4.1.0", + "redux": "^3.1.1", + "redux-thunk": "^1.0.3" }, "devDependencies": { "babel-cli": "^6.3.17", @@ -31,8 +31,8 @@ "babel-preset-stage-0": "^6.3.13", "node-libs-browser": "^0.5.2", "react-hot-loader": "^1.3.0", - "redux-devtools": "^3.0.0", - "redux-devtools-log-monitor": "^1.0.1", + "redux-devtools": "^3.0.1", + "redux-devtools-log-monitor": "^1.0.2", "redux-devtools-dock-monitor": "^1.0.1", "webpack": "^1.9.11", "webpack-dev-server": "^1.9.0" diff --git a/examples/counter/src/store/configureStore.dev.js b/examples/counter/src/store/configureStore.dev.js index f60e377c..e938fe4e 100644 --- a/examples/counter/src/store/configureStore.dev.js +++ b/examples/counter/src/store/configureStore.dev.js @@ -4,7 +4,7 @@ import thunk from 'redux-thunk'; import rootReducer from '../reducers'; import DevTools from '../containers/DevTools'; -const finalCreateStore = compose( +const enhancer = compose( applyMiddleware(thunk), DevTools.instrument(), persistState( @@ -12,10 +12,10 @@ const finalCreateStore = compose( /[?&]debug_session=([^&]+)\b/ ) ) -)(createStore); +); export default function configureStore(initialState) { - const store = finalCreateStore(rootReducer, initialState); + const store = createStore(rootReducer, initialState, enhancer); if (module.hot) { module.hot.accept('../reducers', () => diff --git a/examples/counter/src/store/configureStore.prod.js b/examples/counter/src/store/configureStore.prod.js index 416d0c22..2b24c74f 100644 --- a/examples/counter/src/store/configureStore.prod.js +++ b/examples/counter/src/store/configureStore.prod.js @@ -2,10 +2,8 @@ import { createStore, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from '../reducers'; -const finalCreateStore = compose( - applyMiddleware(thunk) -)(createStore); +const enhancer = applyMiddleware(thunk); export default function configureStore(initialState) { - return finalCreateStore(rootReducer, initialState); + return createStore(rootReducer, initialState, enhancer); } diff --git a/examples/todomvc/package.json b/examples/todomvc/package.json index e5fe41fd..a91beecd 100644 --- a/examples/todomvc/package.json +++ b/examples/todomvc/package.json @@ -29,10 +29,10 @@ "homepage": "https://github.com/gaearon/redux-devtools#readme", "dependencies": { "classnames": "^2.1.2", - "react": "^0.14.0", - "react-dom": "^0.14.0", - "react-redux": "^4.0.0", - "redux": "^3.0.0" + "react": "^0.14.6", + "react-dom": "^0.14.6", + "react-redux": "^4.1.0", + "redux": "^3.1.1" }, "devDependencies": { "babel-cli": "^6.3.17", @@ -44,8 +44,8 @@ "node-libs-browser": "^0.5.2", "raw-loader": "^0.5.1", "react-hot-loader": "^1.3.0", - "redux-devtools": "^3.0.0", - "redux-devtools-log-monitor": "^1.0.1", + "redux-devtools": "^3.0.1", + "redux-devtools-log-monitor": "^1.0.2", "redux-devtools-dock-monitor": "^1.0.1", "style-loader": "^0.12.3", "todomvc-app-css": "^2.0.1", diff --git a/examples/todomvc/store/configureStore.dev.js b/examples/todomvc/store/configureStore.dev.js index bdf5518a..11702e97 100644 --- a/examples/todomvc/store/configureStore.dev.js +++ b/examples/todomvc/store/configureStore.dev.js @@ -3,17 +3,17 @@ import { persistState } from 'redux-devtools'; import rootReducer from '../reducers'; import DevTools from '../containers/DevTools'; -const finalCreateStore = compose( +const enhancer = compose( DevTools.instrument(), persistState( window.location.href.match( /[?&]debug_session=([^&]+)\b/ ) ) -)(createStore); +); export default function configureStore(initialState) { - const store = finalCreateStore(rootReducer, initialState); + const store = createStore(rootReducer, initialState, enhancer); if (module.hot) { module.hot.accept('../reducers', () =>