This is a plugin that only has a peer dependency to piral-core
. What piral-redux
brings to the table is a set of Pilet API extensions that can be used with piral
or piral-core
for including a state container managed by Redux.
By default, these API extensions are not integrated in piral
, so you'd need to add them to your Piral instance.
Piral comes with an integrated state management. There is no need to use this for your own purposes, but you could use it. If you don't want to use it the chance that you actually want to use the popular redux
library is quite high. Now, every pilet could come up with its own state management system, however, sharing this kind of library makes sense. Potentially what makes even more sense is having a single store, where all pilets would get a fraction of it. As such states could even be shared and the complexity of knowing what's happening in the application is reduced to monitoring a single store.
Alternatives: Use the integrated state management. Just expose redux
and react-redux
as shared dependencies.
The following functions are brought to the Pilet API.
Creates a new Redux store for the pilet. The store is tighly coupled to the lifetime of the pilet.
This function returns the connect
function known from React Redux - just applied to the pilet store.
::: summary: For pilet authors
Use the function createReduxStore
to obtain a store connector. The store connector is a higher-order component that wraps an existing component and removes the state
and dispatch
props. Instead, state
will be "connected" to the created pilet store and dispatch
allows modifying the state by calling the reducer with the provided action.
Let's see a full example.
export function setup(api: PiletApi) {
const connect = api.createReduxStore(myReducer);
// ...
}
The reducer could be defined such as:
const initialState = {
count: 0
};
function myReducer(state = initialState, action) {
switch (action.type) {
case "increment":
return {
count: state.count + 1
};
case "decrement":
return {
count: state.count - 1
};
default:
return state;
}
}
Using this construct is straight forward and follows other create...
Pilet APIs.
root.registerPage(
"/sample",
connect(({ state, dispatch }) => (
<div>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
{state.count}
</div>
))
);
:::
::: summary: For Piral instance developers
The provided library only brings API extensions for pilets to a Piral instance.
For the setup of the library itself you'll need to import createReduxApi
from the piral-redux
package.
import { createReduxApi } from 'piral-redux';
The integration looks like:
const instance = createInstance({
// important part
plugins: [createReduxApi()],
// ...
});
There are two options available. The reducer
option allows us to define reducers that also access and manipulate the global state. The enhancer
option allows us to pass in a custom store enhancer. For more details on enhancers please look at the Redux documentation.
:::
Piral is released using the MIT license. For more information see the license file.