A simple set of tools to make using Redux easier
NPM: @acemarke/redux-starter-kit
The redux-starter-kit package is intended to help address three common complaints about Redux:
- "Configuring a Redux store is too complicated"
- "I have to add a lot of packages to get Redux to do anything useful"
- "Redux requires too much boilerplate code"
We can't solve every use case, but in the spirit of create-react-app and apollo-boost, we can try to provide some tools that abstract over the setup process and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.
This package is not intended to solve every possible complaint about Redux, and is deliberately limited in scope. It does not address concepts like "reusable encapsulated Redux modules", data fetching, folder or file structures, managing entity relationships in the store, and so on.
redux-starter-kit includes:
- A
configureStore()function with simplified configuration options. It can automatically combine your slice reducers, adds whatever Redux middleware you supply, includesredux-thunkby default, and enables use of the Redux DevTools Extension. - A
createReducer()utility that lets you supply a lookup table of action types to case reducer functions, rather than writing switch statements. In addition, it automatically uses theimmerlibrary to let you write simpler immutable updates with normal mutative code, likestate.todos[3].completed = true. - An improved version of the widely used
createSelectorutility for creating memoized selector functions, which can accept string keypaths as "input selectors" (re-exported from theselectoratorlibrary).
A friendlier abstraction over the standard Redux createStore function. Takes a single configuration object parameter, with the following options:
function configureStore({
// A single reducer function that will be used as the root reducer,
// or an object of slice reducers that will be passed to combineReducers()
reducer: Object<string, Function> | Function,
// An array of Redux middlewares. If not supplied, defaults to just redux-thunk.
middleware: Array<MiddlewareFunction>,
// Built-in support for devtools.
// Defaults to NODE_ENV !== production
devTools: boolean,
// Same as current createStore.
preloadedState : State,
// Same as current createStore.
enhancer : ReduxStoreEnhancer,
})Basic usage:
import {configureStore} from "@acemarke/redux-starter-kit";
import rootReducer from "./reducers";
const store = configureStore(rootReducer);
// The store now has redux-thunk added, and if in dev, the Redux DevTools Extension is turned onFull example:
import {configureStore, createDefaultMiddleware} from "@acemarke/redux-starter-kit";
// We'll use redux-logger just as an example of adding another middleware
import logger from "redux-logger";
// And use redux-batch as an example of adding enhancers
import { reduxBatch } from '@manaflair/redux-batch';
import todosReducer from "./todos/todosReducer";
import visibilityReducer from "./visibility/visibilityReducer";
const reducer = {
todos : todosReducer,
visibility : visibilityReducer
};
const middleware = createDefaultMiddleware(logger);
const preloadedState = {
todos: [{
text: 'Eat food',
completed: true
}, {
text: 'Exercise',
completed: false
}],
visibilityFilter : 'SHOW_COMPLETED'
};
const store = configureStore({
reducer,
middleware,
devTools : true,
preloadedState,
enhancers : [reduxBatch],
});
// The store has been created with these options:
// - The slice reducers were automatically passed to combineReducers()
// - redux-thunk and redux-logger were added as middleware
// - The Redux DevTools Extension is enabled for both development and production
// - The middleware, batch, and devtools enhancers were automatically composed togetherA utility function to create reducers that handle specific action types, similar to the example function in the "Reducing Boilerplate" Redux docs page. Takes an initial state value and an object that maps action types to case reducer functions. Internally, it uses the immer library, so you can write code in your case reducers that mutates the existing state value, and it will correctly generate immutably-updated state values instead.
function createReducer(initialState : State, actionsMap : Object<String, Function>) {}Example usage:
import {createReducer} from "@acemarke/redux-starter-kit";
function addTodo(state, newTodo) {
// Can safely call state.push() here
state.push({...newTodo, completed : false});
}
function toggleTodo(state, payload) {
const {index} = payload;
const todo = state[index];
// Can directly modify the todo object
todo.completed = !todo.completed;
}
const todosReducer = createReducer([], {
ADD_TODO : addTodo,
TOGGLE_TODO : toggleTodo
});The createSelector utility from the selectorator library, re-exported for ease of use. It acts as a superset of the standard createSelector function from Reselect. The primary improvements are the ability to define "input selectors" using string keypaths, or return an object result based on an object of keypaths. It also accepts an object of customization options for more specific use cases.
For more specifics, see the selectorator usage documentation.
function createSelector(
// Can either be:
// - An array containing selector functions and string keypaths
// - An object whose keys are selector functions and string keypaths
paths : Array<Function | string> | Object<string, string | Function>
)Example usage:
// Define input selector using a string keypath
const getSubtotal = createSelector(['shop.items'], (items) => {
// return value here
});
// Define input selectors as a mix of other selectors and string keypaths
const getTax = createSelector([getSubtotal, 'shop.taxPercent'], (subtotal, taxPercent) => {
// return value here
});
const getContents = createSelector({foo : "foo", bar : "nested.bar" });
// Returns an object like: {foo, bar}The default immutable update function from the immer library, re-exported here as createNextState (also commonly referred to as produce)