From 1dc04807b2e6a49ece909d9f1dfa57223c94e35d Mon Sep 17 00:00:00 2001 From: David Livingston Date: Wed, 25 May 2016 21:21:04 -0500 Subject: [PATCH 1/3] rename createStore param `initialState` to `preloadedState` --- docs/Glossary.md | 4 ++-- docs/api/README.md | 2 +- docs/api/applyMiddleware.md | 2 +- docs/api/createStore.md | 4 ++-- docs/recipes/ServerRendering.md | 26 +++++++++++++------------- index.d.ts | 8 ++++---- src/applyMiddleware.js | 4 ++-- src/combineReducers.js | 2 +- src/createStore.js | 14 +++++++------- test/typescript/store.ts | 4 ++-- 10 files changed, 35 insertions(+), 35 deletions(-) diff --git a/docs/Glossary.md b/docs/Glossary.md index 85b2d49601..9b8ed71ab5 100644 --- a/docs/Glossary.md +++ b/docs/Glossary.md @@ -114,10 +114,10 @@ See the complete [store API reference](api/Store.md#dispatch) for more details. ## Store creator ```js -type StoreCreator = (reducer: Reducer, initialState: ?State) => Store +type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store ``` -A store creator is a function that creates a Redux store. Like with dispatching function, we must distinguish the base store creator, [`createStore(reducer, initialState)`](api/createStore.md) exported from the Redux package, from store creators that are returned from the store enhancers. +A store creator is a function that creates a Redux store. Like with dispatching function, we must distinguish the base store creator, [`createStore(reducer, preloadedState)`](api/createStore.md) exported from the Redux package, from store creators that are returned from the store enhancers. ## Store enhancer diff --git a/docs/api/README.md b/docs/api/README.md index a0d0661788..9473f5f467 100644 --- a/docs/api/README.md +++ b/docs/api/README.md @@ -6,7 +6,7 @@ This section documents the complete Redux API. Keep in mind that Redux is only c ### Top-Level Exports -* [createStore(reducer, [initialState])](createStore.md) +* [createStore(reducer, [preloadedState])](createStore.md) * [combineReducers(reducers)](combineReducers.md) * [applyMiddleware(...middlewares)](applyMiddleware.md) * [bindActionCreators(actionCreators, dispatch)](bindActionCreators.md) diff --git a/docs/api/applyMiddleware.md b/docs/api/applyMiddleware.md index 94de51564d..6d91c0b60d 100644 --- a/docs/api/applyMiddleware.md +++ b/docs/api/applyMiddleware.md @@ -232,7 +232,7 @@ export default connect( const store = createStore( reducer, - initialState, + preloadedState, applyMiddleware(...middleware) ) ``` diff --git a/docs/api/createStore.md b/docs/api/createStore.md index 37b1b3230f..2eedb78fe7 100644 --- a/docs/api/createStore.md +++ b/docs/api/createStore.md @@ -1,4 +1,4 @@ -# `createStore(reducer, [initialState], [enhancer])` +# `createStore(reducer, [preloadedState], [enhancer])` Creates a Redux [store](Store.md) that holds the complete state tree of your app. There should only be a single store in your app. @@ -7,7 +7,7 @@ There should only be a single store in your app. 1. `reducer` *(Function)*: A [reducing function](../Glossary.md#reducer) that returns the next [state tree](../Glossary.md#state), given the current state tree and an [action](../Glossary.md#action) to handle. -2. [`initialState`] *(any)*: The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced `reducer` with [`combineReducers`](combineReducers.md), this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your `reducer` can understand. +2. [`preloadedState`] *(any)*: The initial state. You may optionally specify it to hydrate the state from the server in universal apps, or to restore a previously serialized user session. If you produced `reducer` with [`combineReducers`](combineReducers.md), this must be a plain object with the same shape as the keys passed to it. Otherwise, you are free to pass anything that your `reducer` can understand. 3. [`enhancer`] *(Function)*: The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is [`applyMiddleware()`](./applyMiddleware.md). diff --git a/docs/recipes/ServerRendering.md b/docs/recipes/ServerRendering.md index 817ac269ad..cfe4491be1 100644 --- a/docs/recipes/ServerRendering.md +++ b/docs/recipes/ServerRendering.md @@ -53,7 +53,7 @@ app.use(handleRender) // We are going to fill these out in the sections to follow function handleRender(req, res) { /* ... */ } -function renderFullPage(html, initialState) { /* ... */ } +function renderFullPage(html, preloadedState) { /* ... */ } app.listen(port) ``` @@ -83,23 +83,23 @@ function handleRender(req, res) { ) // Grab the initial state from our Redux store - const initialState = store.getState() + const preloadedState = store.getState() // Send the rendered page back to the client - res.send(renderFullPage(html, initialState)) + res.send(renderFullPage(html, preloadedState)) } ``` ### Inject Initial Component HTML and State -The final step on the server side is to inject our initial component HTML and initial state into a template to be rendered on the client side. To pass along the state, we add a ` @@ -139,10 +139,10 @@ import App from './containers/App' import counterApp from './reducers' // Grab the state from a global injected into server-generated HTML -const initialState = window.__INITIAL_STATE__ +const preloadedState = window.__INITIAL_STATE__ // Create Redux store with initial state -const store = createStore(counterApp, initialState) +const store = createStore(counterApp, preloadedState) render( @@ -182,10 +182,10 @@ function handleRender(req, res) { const counter = parseInt(params.counter, 10) || 0 // Compile an initial state - let initialState = { counter } + let preloadedState = { counter } // Create a new Redux store instance - const store = createStore(counterApp, initialState) + const store = createStore(counterApp, preloadedState) // Render the component to a string const html = renderToString( @@ -245,10 +245,10 @@ function handleRender(req, res) { const counter = parseInt(params.counter, 10) || apiResult || 0 // Compile an initial state - let initialState = { counter } + let preloadedState = { counter } // Create a new Redux store instance - const store = createStore(counterApp, initialState) + const store = createStore(counterApp, preloadedState) // Render the component to a string const html = renderToString( diff --git a/index.d.ts b/index.d.ts index 45a11307d3..9399e01d37 100644 --- a/index.d.ts +++ b/index.d.ts @@ -188,14 +188,14 @@ export interface Store { /** * A store creator is a function that creates a Redux store. Like with * dispatching function, we must distinguish the base store creator, - * `createStore(reducer, initialState)` exported from the Redux package, from + * `createStore(reducer, preloadedState)` exported from the Redux package, from * store creators that are returned from the store enhancers. * * @template S State object type. */ export interface StoreCreator { (reducer: Reducer, enhancer?: StoreEnhancer): Store; - (reducer: Reducer, initialState: S, enhancer?: StoreEnhancer): Store; + (reducer: Reducer, preloadedState: S, enhancer?: StoreEnhancer): Store; } /** @@ -218,7 +218,7 @@ export interface StoreCreator { */ export type StoreEnhancer = (next: StoreEnhancerStoreCreator) => StoreEnhancerStoreCreator; export type GenericStoreEnhancer = (next: StoreEnhancerStoreCreator) => StoreEnhancerStoreCreator; -export type StoreEnhancerStoreCreator = (reducer: Reducer, initialState: S) => Store; +export type StoreEnhancerStoreCreator = (reducer: Reducer, preloadedState: S) => Store; /** * Creates a Redux store that holds the state tree. @@ -234,7 +234,7 @@ export type StoreEnhancerStoreCreator = (reducer: Reducer, initialState: S * @param reducer A function that returns the next state tree, given the * current state tree and the action to handle. * - * @param [initialState] The initial state. You may optionally specify it to + * @param [preloadedState] The initial state. You may optionally specify it to * hydrate the state from the server in universal apps, or to restore a * previously serialized user session. If you use `combineReducers` to * produce the root reducer function, this must be an object with the same diff --git a/src/applyMiddleware.js b/src/applyMiddleware.js index 52c95fc8a7..65114cb28b 100644 --- a/src/applyMiddleware.js +++ b/src/applyMiddleware.js @@ -17,8 +17,8 @@ import compose from './compose' * @returns {Function} A store enhancer applying the middleware. */ export default function applyMiddleware(...middlewares) { - return (createStore) => (reducer, initialState, enhancer) => { - var store = createStore(reducer, initialState, enhancer) + return (createStore) => (reducer, preloadedState, enhancer) => { + var store = createStore(reducer, preloadedState, enhancer) var dispatch = store.dispatch var chain = [] diff --git a/src/combineReducers.js b/src/combineReducers.js index 5a8a20a9b7..ad2d48439e 100644 --- a/src/combineReducers.js +++ b/src/combineReducers.js @@ -15,7 +15,7 @@ function getUndefinedStateErrorMessage(key, action) { function getUnexpectedStateShapeWarningMessage(inputState, reducers, action) { var reducerKeys = Object.keys(reducers) var argumentName = action && action.type === ActionTypes.INIT ? - 'initialState argument passed to createStore' : + 'preloadedState argument passed to createStore' : 'previous state received by the reducer' if (reducerKeys.length === 0) { diff --git a/src/createStore.js b/src/createStore.js index 0c59bb0689..9f4ab038fe 100644 --- a/src/createStore.js +++ b/src/createStore.js @@ -22,7 +22,7 @@ export var ActionTypes = { * @param {Function} reducer A function that returns the next state tree, given * the current state tree and the action to handle. * - * @param {any} [initialState] The initial state. You may optionally specify it + * @param {any} [preloadedState] The initial state. You may optionally specify it * to hydrate the state from the server in universal apps, or to restore a * previously serialized user session. * If you use `combineReducers` to produce the root reducer function, this must be @@ -36,10 +36,10 @@ export var ActionTypes = { * @returns {Store} A Redux store that lets you read the state, dispatch actions * and subscribe to changes. */ -export default function createStore(reducer, initialState, enhancer) { - if (typeof initialState === 'function' && typeof enhancer === 'undefined') { - enhancer = initialState - initialState = undefined +export default function createStore(reducer, preloadedState, enhancer) { + if (typeof preloadedState === 'function' && typeof enhancer === 'undefined') { + enhancer = preloadedState + preloadedState = undefined } if (typeof enhancer !== 'undefined') { @@ -47,7 +47,7 @@ export default function createStore(reducer, initialState, enhancer) { throw new Error('Expected the enhancer to be a function.') } - return enhancer(createStore)(reducer, initialState) + return enhancer(createStore)(reducer, preloadedState) } if (typeof reducer !== 'function') { @@ -55,7 +55,7 @@ export default function createStore(reducer, initialState, enhancer) { } var currentReducer = reducer - var currentState = initialState + var currentState = preloadedState var currentListeners = [] var nextListeners = currentListeners var isDispatching = false diff --git a/test/typescript/store.ts b/test/typescript/store.ts index 59aaaf6232..2939a237dd 100644 --- a/test/typescript/store.ts +++ b/test/typescript/store.ts @@ -17,7 +17,7 @@ const reducer: Reducer = (state: State, action: Action): State => { const store: Store = createStore(reducer); -const storeWithInitialState: Store = createStore(reducer, { +const storeWithPreloadedState: Store = createStore(reducer, { todos: [] }); @@ -27,7 +27,7 @@ const specificEnhencer: StoreEnhancer = next => next; const storeWithGenericEnhancer: Store = createStore(reducer, genericEnhancer); const storeWithSpecificEnhancer: Store = createStore(reducer, specificEnhencer); -const storeWithInitialStateAndEnhancer: Store = createStore(reducer, { +const storeWithPreloadedStateAndEnhancer: Store = createStore(reducer, { todos: [] }, genericEnhancer); From a06ebfa5e189469dd4e99468b852400d5c89a265 Mon Sep 17 00:00:00 2001 From: David Livingston Date: Wed, 25 May 2016 21:29:22 -0500 Subject: [PATCH 2/3] rename configureStore param `initialState` to `preloadedState` --- docs/advanced/ExampleRedditAPI.md | 4 ++-- examples/async/store/configureStore.js | 4 ++-- examples/real-world/store/configureStore.dev.js | 4 ++-- examples/real-world/store/configureStore.prod.js | 4 ++-- examples/todomvc/store/configureStore.js | 4 ++-- examples/tree-view/store/configureStore.js | 4 ++-- examples/universal/client/index.js | 4 ++-- examples/universal/common/store/configureStore.js | 4 ++-- examples/universal/server/server.js | 4 ++-- 9 files changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/advanced/ExampleRedditAPI.md b/docs/advanced/ExampleRedditAPI.md index 67694e8f2e..60c7dc0f5b 100644 --- a/docs/advanced/ExampleRedditAPI.md +++ b/docs/advanced/ExampleRedditAPI.md @@ -170,10 +170,10 @@ import rootReducer from './reducers' const loggerMiddleware = createLogger() -export default function configureStore(initialState) { +export default function configureStore(preloadedState) { return createStore( rootReducer, - initialState, + preloadedState, applyMiddleware( thunkMiddleware, loggerMiddleware diff --git a/examples/async/store/configureStore.js b/examples/async/store/configureStore.js index 465d94919a..c8964c2dca 100644 --- a/examples/async/store/configureStore.js +++ b/examples/async/store/configureStore.js @@ -3,10 +3,10 @@ import thunkMiddleware from 'redux-thunk' import createLogger from 'redux-logger' import rootReducer from '../reducers' -export default function configureStore(initialState) { +export default function configureStore(preloadedState) { const store = createStore( rootReducer, - initialState, + preloadedState, applyMiddleware(thunkMiddleware, createLogger()) ) diff --git a/examples/real-world/store/configureStore.dev.js b/examples/real-world/store/configureStore.dev.js index c081a7b347..318288d705 100644 --- a/examples/real-world/store/configureStore.dev.js +++ b/examples/real-world/store/configureStore.dev.js @@ -5,10 +5,10 @@ import api from '../middleware/api' import rootReducer from '../reducers' import DevTools from '../containers/DevTools' -export default function configureStore(initialState) { +export default function configureStore(preloadedState) { const store = createStore( rootReducer, - initialState, + preloadedState, compose( applyMiddleware(thunk, api, createLogger()), DevTools.instrument() diff --git a/examples/real-world/store/configureStore.prod.js b/examples/real-world/store/configureStore.prod.js index 3a9b853caf..b35cb63113 100644 --- a/examples/real-world/store/configureStore.prod.js +++ b/examples/real-world/store/configureStore.prod.js @@ -3,10 +3,10 @@ import thunk from 'redux-thunk' import api from '../middleware/api' import rootReducer from '../reducers' -export default function configureStore(initialState) { +export default function configureStore(preloadedState) { return createStore( rootReducer, - initialState, + preloadedState, applyMiddleware(thunk, api) ) } diff --git a/examples/todomvc/store/configureStore.js b/examples/todomvc/store/configureStore.js index 900708b6fa..9070823177 100644 --- a/examples/todomvc/store/configureStore.js +++ b/examples/todomvc/store/configureStore.js @@ -1,8 +1,8 @@ import { createStore } from 'redux' import rootReducer from '../reducers' -export default function configureStore(initialState) { - const store = createStore(rootReducer, initialState) +export default function configureStore(preloadedState) { + const store = createStore(rootReducer, preloadedState) if (module.hot) { // Enable Webpack hot module replacement for reducers diff --git a/examples/tree-view/store/configureStore.js b/examples/tree-view/store/configureStore.js index 33390d1fbe..18d40c0a9b 100644 --- a/examples/tree-view/store/configureStore.js +++ b/examples/tree-view/store/configureStore.js @@ -1,8 +1,8 @@ import { createStore } from 'redux' import reducer from '../reducers' -export default function configureStore(initialState) { - const store = createStore(reducer, initialState) +export default function configureStore(preloadedState) { + const store = createStore(reducer, preloadedState) if (module.hot) { // Enable Webpack hot module replacement for reducers diff --git a/examples/universal/client/index.js b/examples/universal/client/index.js index 16d2b5cd53..7b9dee4682 100644 --- a/examples/universal/client/index.js +++ b/examples/universal/client/index.js @@ -5,8 +5,8 @@ import { Provider } from 'react-redux' import configureStore from '../common/store/configureStore' import App from '../common/containers/App' -const initialState = window.__INITIAL_STATE__ -const store = configureStore(initialState) +const preloadedState = window.__INITIAL_STATE__ +const store = configureStore(preloadedState) const rootElement = document.getElementById('app') render( diff --git a/examples/universal/common/store/configureStore.js b/examples/universal/common/store/configureStore.js index 5ce5e52e71..b4f773ee8b 100644 --- a/examples/universal/common/store/configureStore.js +++ b/examples/universal/common/store/configureStore.js @@ -2,10 +2,10 @@ import { createStore, applyMiddleware } from 'redux' import thunk from 'redux-thunk' import rootReducer from '../reducers' -export default function configureStore(initialState) { +export default function configureStore(preloadedState) { const store = createStore( rootReducer, - initialState, + preloadedState, applyMiddleware(thunk) ) diff --git a/examples/universal/server/server.js b/examples/universal/server/server.js index 7cdaae9c1b..37b884be32 100644 --- a/examples/universal/server/server.js +++ b/examples/universal/server/server.js @@ -36,10 +36,10 @@ function handleRender(req, res) { const counter = parseInt(params.counter, 10) || apiResult || 0 // Compile an initial state - const initialState = { counter } + const preloadedState = { counter } // Create a new Redux store instance - const store = configureStore(initialState) + const store = configureStore(preloadedState) // Render the component to a string const html = renderToString( From 260aa2bdcb1b94cff7509d843dfb3f8f1d220281 Mon Sep 17 00:00:00 2001 From: David Livingston Date: Wed, 25 May 2016 21:38:16 -0500 Subject: [PATCH 3/3] rename `window.__INITIAL_STATE__` in examples and docs rename window.__INITIAL_STATE__ to window.__PRELOADED_STATE__ --- docs/recipes/ServerRendering.md | 12 ++++++------ examples/universal/client/index.js | 2 +- examples/universal/server/server.js | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/recipes/ServerRendering.md b/docs/recipes/ServerRendering.md index cfe4491be1..e81a8794cd 100644 --- a/docs/recipes/ServerRendering.md +++ b/docs/recipes/ServerRendering.md @@ -92,9 +92,9 @@ function handleRender(req, res) { ### Inject Initial Component HTML and State -The final step on the server side is to inject our initial component HTML and initial state into a template to be rendered on the client side. To pass along the state, we add a ` @@ -124,7 +124,7 @@ function renderFullPage(html, preloadedState) { ## The Client Side -The client side is very straightforward. All we need to do is grab the initial state from `window.__INITIAL_STATE__`, and pass it to our [`createStore()`](../api/createStore.md) function as the initial state. +The client side is very straightforward. All we need to do is grab the initial state from `window.__PRELOADED_STATE__`, and pass it to our [`createStore()`](../api/createStore.md) function as the initial state. Let’s take a look at our new client file: @@ -139,7 +139,7 @@ import App from './containers/App' import counterApp from './reducers' // Grab the state from a global injected into server-generated HTML -const preloadedState = window.__INITIAL_STATE__ +const preloadedState = window.__PRELOADED_STATE__ // Create Redux store with initial state const store = createStore(counterApp, preloadedState) @@ -202,7 +202,7 @@ function handleRender(req, res) { } ``` -The code reads from the Express `Request` object passed into our server middleware. The parameter is parsed into a number and then set in the initial state. If you visit [http://localhost:3000/?counter=100](http://localhost:3000/?counter=100) in your browser, you’ll see the counter starts at 100. In the rendered HTML, you’ll see the counter output as 100 and the `__INITIAL_STATE__` variable has the counter set in it. +The code reads from the Express `Request` object passed into our server middleware. The parameter is parsed into a number and then set in the initial state. If you visit [http://localhost:3000/?counter=100](http://localhost:3000/?counter=100) in your browser, you’ll see the counter starts at 100. In the rendered HTML, you’ll see the counter output as 100 and the `__PRELOADED_STATE__` variable has the counter set in it. ### Async State Fetching diff --git a/examples/universal/client/index.js b/examples/universal/client/index.js index 7b9dee4682..6776c1f183 100644 --- a/examples/universal/client/index.js +++ b/examples/universal/client/index.js @@ -5,7 +5,7 @@ import { Provider } from 'react-redux' import configureStore from '../common/store/configureStore' import App from '../common/containers/App' -const preloadedState = window.__INITIAL_STATE__ +const preloadedState = window.__PRELOADED_STATE__ const store = configureStore(preloadedState) const rootElement = document.getElementById('app') diff --git a/examples/universal/server/server.js b/examples/universal/server/server.js index 37b884be32..69d4ae72cf 100644 --- a/examples/universal/server/server.js +++ b/examples/universal/server/server.js @@ -56,7 +56,7 @@ function handleRender(req, res) { }) } -function renderFullPage(html, initialState) { +function renderFullPage(html, preloadedState) { return ` @@ -66,7 +66,7 @@ function renderFullPage(html, initialState) {
${html}