Redux

You can use Vike with Redux.

This page documents how to manually integrate Redux.

There isn't a Vike extension for Redux yet, but contribution welcome to create one.

Initial state

When using a store such as Redux, your components don't access fetched data directly: your components only access the store.

Integration example:

1. Get the initial SSR state of the store and make it available as pageContext.initialStoreState.

   For example in onAfterRenderHtml(), or onRenderHtml() if you don't use vike-react/vike-vue/vike-solid.

   See also: API > pageContext > Custom.

2. Make pageContext.initialStoreState available on the client-side.

   See API > passToClient.

3. Initialize Redux on the client-side with pageContext.initialStoreState.

   For example in onBeforeRenderClient(), or onRenderClient() if you don't use vike-react/vike-vue/vike-solid.

See also:

• Redux > SSR Recipe

Examples

• 2023.12 GitHub > brillout/vike-with-redux - Example using Client Routing.
• 2023.10 GitHub > brillout/vike-with-redux_minimal-example - Minimal example using Server Routing.

See also

• Redux > SSR Recipe