# Redux Preboiled

![](https://3542556397-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_JX1-xEvmVOqi2q8Vs%2Fuploads%2Fgit-blob-17c03233a281d564b4eafee9a7c37ef8e648686d%2Flogo.png?alt=media)

*Pre-cooked Redux helpers, served à la carte.*

Redux Preboiled is a collection of general-purpose [Redux](https://redux.js.org/) helper functions. It helps you reduce boilerplate when writing reducers, action creators, and tests.

* **Served *****à la carte*****.** Each of Preboiled's helpers can be used stand-alone. Just pick and use the ones you want and ignore the rest. If your build setup does [tree shaking](https://developers.google.com/web/fundamentals/performance/optimizing-javascript/tree-shaking/), the unused helpers won't even be added to your application's build output.
* **Minimal magic.** Preboiled avoids clever "magic" tricks which minimize boilerplate at the expense of understandability. Instead, it favors simple, composable functions with easy-to-understand semantics and implementations.
* **TypeScript-friendly.** Redux Preboiled is written in [TypeScript](https://www.typescriptlang.org/). Its helpers are designed to be easy to type and amenable to automatic type inference, making it easy to write type-safe Redux code.

## A First Taste

The following snippet uses a bunch of Redux Preboiled's helpers to define a simple Redux counter module with support for `increment` and `multiply` actions. It is about half the size of the equivalent vanilla Redux code.

```js
import {
  chainReducers,
  createAction,
  onAction,
  withInitialState
} from 'redux-preboiled'

const increment = createAction('increment')
const multiply = createAction('multiply').withPayload()

const counterReducer = chainReducers(
  withInitialState(0),
  onAction(increment, state => state + 1),
  onAction(multiply, (state, action) => state * action.payload)
)

// Example usage:

import { createStore } from 'redux'

const store = createStore(counterReducer)
store.dispatch(increment())
store.dispatch(increment())
store.dispatch(multiply(2))
store.getState()
// => 4
```

* `createAction` generates various types of action creator functions with minimal cerenomy. The specified action type value is made available as an action creator property (`increment.type` and `mutliply.type` in this example), making separate action type constants unnecessary. See the [Actions](https://redux-preboiled.js.org/guides/actions) guide.
* The `onAction`, `withInitialState` and `chainReducers` helpers can be combined as a less noisy alternative to the classic `switch` reducer pattern. In TypeScript, the type of the sub-reducers' `action` parameters are automatically inferred from the action creators passed to `onAction`, improving type safety and editor auto-completion. See the [Reducers](https://redux-preboiled.js.org/guides/reducers) guide.

## Next Steps

The [Getting Started](https://redux-preboiled.js.org/guides/getting-started) guide shows you how to install and use Redux Preboiled. Follow the links to the other guides for a tour through Redux Preboiled's helpers. You can also look at the repository's [examples](https://github.com/denisw/redux-preboiled/tree/master/examples) directory.

For reference documentation, see the [API docs](https://redux-preboiled.js.org/api/api).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://redux-preboiled.js.org/introduction.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.