erikras/redux-form

View on GitHub
docs/api/ReducerPlugin.md

Summary

Maintainability
Test Coverage
# `reducer.plugin(Object<String, Function>)`

[`View source on GitHub`](https://github.com/redux-form/redux-form/blob/master/src/reducer.js#L369)

> Returns a form reducer that will also pass each action through additional reducers specified.
> The parameter should be an object mapping from `formName` to a `(state, action) => nextState`
> reducer. **The `state` passed to each reducer will only be the slice that pertains to that form.**

## Explanation

Part of the beauty of the flux architecture is that all the reducers (or "stores", in canonical
Flux terminology) receive all the actions, and they can modify their data based on any of them.
For example, say you have a login form, and when your login submission fails, you want to clear
out the password field. Your login submission is part of another reducer/actions system, but
your form can still respond.

Rather than just using the vanilla reducer from `redux-form`, you can augment it to do other
things by calling the `plugin()` function.

Plugins receive all actions, except those targeting other forms. If you want plugins to receive
actions from other forms, you can add the config { receiveAllFormActions: true } to
reducer.plugin.

---

**Note:** This is an advanced operation that allows you to modify the internal state of the
`redux-form` state slice. You can mess things up if you are not careful.

---

## Example

The example below will clear the `login` form's `password` field when the `AUTH_LOGIN_FAIL`
action is dispatched.

```javascript
import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'
import { AUTH_LOGIN_FAIL } from '../actions/actionTypes'

const reducers = {
  // ... your other reducers here ...
  form: formReducer.plugin({
    login: (state, action) => {
      // <----- 'login' is name of form given to reduxForm()
      switch (action.type) {
        case AUTH_LOGIN_FAIL:
          return {
            ...state,
            values: {
              ...state.values,
              password: undefined // <----- clear password value
            },
            registeredFields: {
              ...state.registeredFields,
              password: undefined // <----- clear field state, too (touched, etc.)
            }
          }
        default:
          return state
      }
    }
  })
}
const reducer = combineReducers(reducers)
const store = createStore(reducer)
```