@gasket/redux
Redux configuration for Gasket apps.
Installation
npm i @gasket/redux
Functions
configureMakeStore
Set up Redux store configuration and return a makeStore
function
Signature
configureMakeStore(options, [postCreate]): makeStore
Props
options
- (object) Options objectinitialState
- (object) Optionally set any preloaded statereducers
- (object) Map of identifiers and reducer functions which will be combined.rootReducer
- (function) Optional entry reducer. If returned state is unchanged, it will pass through to combinedreducers
.middleware
- (function[]) Additional redux middleware to applyenhancers
- (function[]) Any other redux store enhancerslogging
- (boolean) set to true if you want to enable redux logger. (default: false)
postCreate
- (function) Executed after the store is create the resulting store as the argument
Return Value
makeStore
- (function) Creates the redux store for each server-side request and once on the client, hydrating with the state from the server.
getOrCreateStore
Creates a helper to check if an existing store is in the context, otherwise it
will make a new instance. Context can include a store
property directly or on
req
and can be Next.js App or Page context.
Signature
getOrCreateStore(makeStore): (context) => Store
Props
makeStore
- (function) Creates the redux store for each server-side request and once on the client, hydrating with the state from the server. Will only be called if an existing store is not found within the context.
Usage
This package is only compatible with Gasket apps that use the pages router in Next.js with a custom server.
Gasket apps no longer ship with a default redux configuration which includes the
redux-thunk middleware. The configureMakeStore
can be used to do any configuration. The
most common use case is to add reducers at the app level.
By default, custom store configurations can be placed in a store.js
at the
root of your app or in a ./redux
dir. If you wish for it to reside elsewhere,
direct the redux.makeStore
property to it in your app's gasket.js
file.
Example: adding reducers
// ./store.js
import { configureMakeStore } from '@gasket/redux';
import reducers from './reducers'; // apps reducers
export default configureMakeStore({ reducers });
Example: initial state
If you are adding keys to the initial state without reducers, you make get
an unexpected key found in previous state
error. In this case consider using
@gasket/data for these static-like values, or register placeholder reducers
in your store.
// ./store.js
import { configureMakeStore } from '@gasket/redux';
import myReducers './reducers'; // apps reducers
const reducers = {
...myReducers,
+ custom: f => f || null
};
const initialState = { custom: 'example' };
export default configureMakeStore({ initialState, reducers });
Example: adding middleware in a custom path (redux-saga)
// ./lib/make-store.js
import sagaMiddleWare from 'redux-saga'.default();
import { configureMakeStore } from '@gasket/redux';
import reducers from '../reducers';
import rootSaga from '../sagas';
const middleware = [sagaMiddleWare];
export default configureMakeStore({ reducers, middleware }, store => {
// The method below is only needed if you are utilizing
// next-redux-saga wrapper for handling sagas in `getInitialProps`
// store.runSagaTask = (saga) => {
// store.sagaTask = sagaMiddleWare.run(saga);
// };
// store.runSagaTask(rootSaga);
// This is needed to initialize sagas
store.sagaTask = sagaMiddleWare.run(saga);
});
Next in the gasket.js, set the redux.makeStore
field to the file. This will start up the app using the custom configuration.
// gasket.js
export default makeGasket({
redux: {
makeStore: './lib/make-store.js'
}
});
Example: passing custom thunk middleware
The default thunk middleware can be overridden with a customized version by
passing thunkMiddleware
. A common use case for this is to use the
withExtraArgument
feature of redux-thunk
.
// ./store.js
import { configureMakeStore } from '@gasket/redux';
import reducers from './reducers';
import thunk from 'redux-thunk';
const myExtraArg = {};
const thunkMiddleware = thunk.withExtraArgument(myExtraArg);
export default configureMakeStore({ reducers, thunkMiddleware });