How to setup redux or redux toolkit ?

[JustFly1984]

I have several apps made in gatsby.js, with redux and intl
I've managed to refactor some of them to vite, but some of them I want to refactor to vike, cos it supports ssg and looks like next step after remix.

[brillout]

https://vike.dev/redux although I think the docs could be improved. Let me have a look at how/if it can be improved.

[JustFly1984]

how can I render react-redux <Provider /> with globalThis or pageContext.isHydration ? I need the store to available for every page, and do not want serialisation/de-serialisation happen on page navigation, but at the same time I'm not going to attach store to the window object on the client, since it allows some attack vectors.

CSP nonce is the ultimate way to secure your code from code injections in the browser runtime, kind of protecting the end user from malware browser extensions. Adding nonce dummy string to <script> and <link css> tags at build time.

I'm using cloudflare pages CDN to host deployed project, and cloudflare workers to attach a middleware to pages routes, so it modifies the headers adding CSP headers, and replacing dummy string with an actual nonce in html in response.

This is important if you care about your users privacy and security, and got tired about MITM attacks injecting their faulty code into your client's browser, and triggering errors or outright crashing your website. I'm noticing weird shit in Sentry logs constantly. Enabling CSP nonce reduces spam errors received by Sentry. And yes, every error logged is eating the Sentry monthly budget.
how can I render react-redux with globalThis or pageContext.isHydration ? I need the store to available for every page, and do not want serialisation/de-serialisation happen on page navigation, but at the same time I'm not going to attach store to the window object on the client, since it allows some attack vectors.

CSP nonce is the ultimate way to secure your code from code injections in the browser runtime, kind of protecting the end user from malware browser extensions. Adding nonce dummy string to <script> and <link css> tags at build time.

I'm using cloudflare pages CDN to host deployed project, and cloudflare workers to attach a middleware to pages routes, so it modifies the headers adding CSP headers, and replacing dummy string with an actual nonce in html in response.

This is important if you care about your users privacy and security, and got tired about MITM attacks injecting their faulty code into your client's browser, and triggering errors or outright crashing your website. I'm noticing weird shit in Sentry logs constantly. Enabling CSP nonce reduces spam errors received by Sentry. And yes, every error logged is eating the Sentry monthly budget.

[brillout]

how can I render react-redux <Provider /> with globalThis or pageContext.isHydration ?

It allows you decide whether you initialize only once or for every page. It's seems to be mostly a user-land question unrelated to Vike at this point, but let me know if you've some evidence that something about Vike is blocking you.

As for CSP, there is a draft PR implementing it. Contribution welcome to revive & finish it.

[JustFly1984]

@brillout
I don't understand the part about pageContext.isHydration

I've looked at your PR for CSP, and left the comment. My idea is that end user will provide the nonce as string, and it will be set as argument on every link and script, generated by vite/vike. Also end-user should be able to add the same nonce for custom scripts and link tags for SSG.

In case of SSR, it should be generated for every request on the backend side, added to CSP header and injected into html to sign every script and link tag.

Both ways there should be default nonce value which is replaced on every request.

[brillout]

👍 Thanks for the CSP insights.

[JustFly1984]

@brillout sure, I like what you've created!