Custom Action Types
The name 'plugins' may seem intimidating, but don't be worried. Plugins are reducers that you can reuse for any resource slice. If you know how to write a reducer, then you know how to write a plugin.
Using a Plugin
You define plugins for each resource type when you call
resourceReducer. The second argument to that function is an options option, and within it you can pass plugins as an array:1
import resourceReducer from 'redux-resource';
2
import somePlugin from './some-plugin';
3
import anotherPlugin from './another-plugin';
4
​
5
export default resourceReducer('books', {
6
plugins: [somePlugin, anotherPlugin]
7
});
Copied!
Writing a Plugin
A plugin is a function that with the following signature:
1
(resourceType, options) => reducerFunction
Copied!
The return value,
reducerFunction, is also a function. This returned function has the same signature as a Redux reducer:1
(previousState, action) => newState
Copied!
where
state is the value of the state after running it through the built-in reducer and action is the action that was dispatched.The simplest plugin then (which doesn't do anything), would look like this:
1
function myPlugin(resourceType, options) {
2
return function(state, action) {
3
return state;
4
}
5
}
Copied!
If you prefer using arrow functions, you might choose to write this like so:
1
const myPlugin = (resourceType, option) => (state, action) => state;
Copied!
This plugin isn't very exciting, so let's look at more realistic examples.
Selecting Resources
Let's build a plugin that lets a user select resources. The code for this plugin looks like this:
1
import { setResourceMeta } from 'redux-resource';
2
import myActionTypes from './my-action-types';
3
​
4
export default function(resourceType, options) {
5
return function(state, action) {
6
// Ignore actions that were dispatched for another resource type
7
if (action.resourceType !== resourceType) {
8
return state;
9
}
10
​
11
if (action.type === myActionTypes.SELECT_RESOURCES) {
12
return {
13
...state,
14
meta: setResourceMeta({
15
resources: action.resources,
16
meta: state.meta,
17
newMeta: {
18
selected: true
19
},
20
initialResourceMeta: options.initialResourceMeta
21
})
22
};
23
} else if (action.type === myActionTypes.UNSELECT_RESOURCES) {
24
return {
25
...state,
26
meta: setResourceMeta({
27
resources: action.resources,
28
meta: state.meta,
29
newMeta: {
30
selected: false
31
},
32
initialResourceMeta: options.initialResourceMeta
33
})
34
};
35
} else {
36
return state;
37
}
38
}
39
}
Copied!
You would then use this plugin like so:
1
import { createStore, combineReducers } from 'redux';
2
import { resourceReducer } from 'redux-resource';
3
import selectResources from './plugins/select-resources';
4
​
5
let store = createStore(
6
combineReducers({
7
books: resourceReducer('books', {
8
plugins: [selectResources]
9
}),
10
})
11
);
Copied!
Customizable Plugins
You can write plugins that can be customized per-slice by taking advantage of the fact that the
resourceReducer's options are passed into plugins. For instance, if you had a plugin like the following:1
export default function customizablePlugin(resourceType, options) {
2
return function(state, action) {
3
if (options.useSpecialBehavior) {
4
// Perform a computation
5
} else {
6
// Do some other computation here
7
}
8
};
9
}
Copied!
then you could trigger the special behavior by passing
useSpecialBehavior: true as an option to resourceReducer:1
import resourceReducer from 'redux-resource';
2
import customizablePlugin from './customizable-plugin';
3
​
4
export default resourceReducer('books', {
5
plugins: [customizablePlugin],
6
useSpecialBehavior: true
7
});
Copied!
If this API isn't to your liking, then you can also just wrap the plugin itself in a function, like so:
1
export default function(pluginOptions) {
2
return function customizablePlugin(resourceType, options) {
3
return function(state, action) {
4
if (pluginOptions.useSpecialBehavior) {
5
// Perform a computation
6
} else {
7
// Do some other computation here
8
}
9
};
10
};
11
}
Copied!
which would be used in the following way:
1
import resourceReducer from 'redux-resource';
2
import customizablePlugin from './customizable-plugin';
3
​
4
export default resourceReducer('books', {
5
plugins: [
6
customizablePlugin({ useSpecialBehavior: true})
7
]
8
});
Copied!
You may dislike this approach due to the tripley-nested functions. That's fine, because either way works. Use the version that makes the most sense to you.
Best Practices
Because plugins are so similar to reducers, you can use a
switch statement and support multiple action types within each plugin. This is usually a good thing, but be mindful of keeping each plugin limited to a single responsibility.For example, in the above example of a plugin for selecting resources, it supports two Action types – one for selection, and one for deselection. This plugin encapsulates that one responsibility, and it isn't responsible for any other Action types.
We recommend having a plugin for each distinct responsibility.
Last modified 2yr ago