Created
June 27, 2018 00:55
-
-
Save edrpls/0d0aba51ef704063527da9539ed65720 to your computer and use it in GitHub Desktop.
Copy of Redux' createStore to ease migrations from Flux to Redux
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This file is base is based on https://github.com/vivek3003/flux-redux-migration, with some modifications | |
// for flux's actionTypes and other validations | |
import isPlainObject from 'lodash/isPlainObject'; | |
import { createStore } from 'redux'; | |
/** | |
* This is a copy of Redux's createStore. Only the dispatch function is modified. | |
* It passes the action Type as parameter to the callbacks registered by store.subscribe * | |
* / | |
/** | |
* These are private action types reserved by Redux. | |
* For any unknown actions, you must return the current state. | |
* If the current state is undefined, you must return the initial state. | |
* Do not reference these action types directly in your code. | |
*/ | |
export var ActionTypes = { | |
INIT: '@@redux/INIT' | |
}; | |
/** | |
* Creates a Redux store that holds the state tree. | |
* The only way to change the data in the store is to call `dispatch()` on it. | |
* | |
* There should only be a single store in your app. To specify how different | |
* parts of the state tree respond to actions, you may combine several reducers | |
* into a single reducer function by using `combineReducers`. | |
* | |
* @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 | |
* 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 shape as `combineReducers` keys. | |
* | |
* @param {Function} enhancer 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()`. | |
* | |
* @returns {Store} A Redux store that lets you read the state, dispatch actions | |
* and subscribe to changes. | |
*/ | |
export default function createFluxStore(reducer, initialState, enhancer) { | |
if (typeof initialState === 'function' && typeof enhancer === 'undefined') { | |
enhancer = initialState; | |
initialState = undefined; | |
} | |
if (typeof enhancer !== 'undefined') { | |
if (typeof enhancer !== 'function') { | |
throw new Error('Expected the enhancer to be a function.'); | |
} | |
return enhancer(createStore)(reducer, initialState); | |
} | |
if (typeof reducer !== 'function') { | |
throw new Error('Expected the reducer to be a function.'); | |
} | |
var currentReducer = reducer; | |
var currentState = initialState; | |
var currentListeners = []; | |
var nextListeners = currentListeners; | |
var isDispatching = false; | |
function ensureCanMutateNextListeners() { | |
if (nextListeners === currentListeners) { | |
nextListeners = currentListeners.slice(); | |
} | |
} | |
/** | |
* Reads the state tree managed by the store. | |
* | |
* @returns {any} The current state tree of your application. | |
*/ | |
function getState() { | |
return currentState; | |
} | |
/** | |
* Adds a change listener. It will be called any time an action is dispatched, | |
* and some part of the state tree may potentially have changed. You may then | |
* call `getState()` to read the current state tree inside the callback. | |
* | |
* You may call `dispatch()` from a change listener, with the following | |
* caveats: | |
* | |
* 1. The subscriptions are snapshotted just before every `dispatch()` call. | |
* If you subscribe or unsubscribe while the listeners are being invoked, this | |
* will not have any effect on the `dispatch()` that is currently in progress. | |
* However, the next `dispatch()` call, whether nested or not, will use a more | |
* recent snapshot of the subscription list. | |
* | |
* 2. The listener should not expect to see all states changes, as the state | |
* might have been updated multiple times during a nested `dispatch()` before | |
* the listener is called. It is, however, guaranteed that all subscribers | |
* registered before the `dispatch()` started will be called with the latest | |
* state by the time it exits. | |
* | |
* @param {Function} listener A callback to be invoked on every dispatch. | |
* @returns {Function} A function to remove this change listener. | |
*/ | |
function subscribe(listener) { | |
if (typeof listener !== 'function') { | |
throw new Error('Expected listener to be a function.'); | |
} | |
var isSubscribed = true; | |
ensureCanMutateNextListeners(); | |
nextListeners.push(listener); | |
return function unsubscribe() { | |
if (!isSubscribed) { | |
return; | |
} | |
isSubscribed = false; | |
ensureCanMutateNextListeners(); | |
var index = nextListeners.indexOf(listener); | |
nextListeners.splice(index, 1); | |
}; | |
} | |
/** | |
* Dispatches an action. It is the only way to trigger a state change. | |
* | |
* The `reducer` function, used to create the store, will be called with the | |
* current state tree and the given `action`. Its return value will | |
* be considered the **next** state of the tree, and the change listeners | |
* will be notified. | |
* | |
* The base implementation only supports plain object actions. If you want to | |
* dispatch a Promise, an Observable, a thunk, or something else, you need to | |
* wrap your store creating function into the corresponding middleware. For | |
* example, see the documentation for the `redux-thunk` package. Even the | |
* middleware will eventually dispatch plain object actions using this method. | |
* | |
* @param {Object} action A plain object representing “what changed”. It is | |
* a good idea to keep actions serializable so you can record and replay user | |
* sessions, or use the time travelling `redux-devtools`. An action must have | |
* a `type` property which may not be `undefined`. It is a good idea to use | |
* string constants for action types. | |
* | |
* @returns {Object} For convenience, the same action object you dispatched. | |
* | |
* Note that, if you use a custom middleware, it may wrap `dispatch()` to | |
* return something else (for example, a Promise you can await). | |
*/ | |
function dispatch(action) { | |
if (!isPlainObject(action)) { | |
throw new Error( | |
'Actions must be plain objects. ' + 'Use custom middleware for async actions.' | |
); | |
} | |
if (typeof action.type === 'undefined') { | |
if (typeof action.actionType === 'undefined') { | |
throw new Error( | |
'Actions may not have an undefined "type" property. ' + | |
'Have you misspelled a constant?' | |
); | |
} else { | |
action.type = action.actionType; | |
} | |
} | |
if (isDispatching) { | |
throw new Error('Reducers may not dispatch actions.'); | |
} | |
try { | |
isDispatching = true; | |
currentState = currentReducer(currentState, action); | |
} finally { | |
isDispatching = false; | |
} | |
var listeners = (currentListeners = nextListeners); | |
for (var i = 0; i < listeners.length; i++) { | |
listeners[i](action); | |
} | |
return action; | |
} | |
/** | |
* Replaces the reducer currently used by the store to calculate the state. | |
* | |
* You might need this if your app implements code splitting and you want to | |
* load some of the reducers dynamically. You might also need this if you | |
* implement a hot reloading mechanism for Redux. | |
* | |
* @param {Function} nextReducer The reducer for the store to use instead. | |
* @returns {void} | |
*/ | |
function replaceReducer(nextReducer) { | |
if (typeof nextReducer !== 'function') { | |
throw new Error('Expected the nextReducer to be a function.'); | |
} | |
currentReducer = nextReducer; | |
dispatch({ type: ActionTypes.INIT }); | |
} | |
// When a store is created, an "INIT" action is dispatched so that every | |
// reducer returns their initial state. This effectively populates | |
// the initial state tree. | |
dispatch({ type: ActionTypes.INIT }); | |
return { | |
dispatch, | |
subscribe, | |
getState, | |
replaceReducer | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment