Restash is a simple React context store which uses useReducer behind the scenes. The API is broken into components so that you can either use the default implementation or build up your own. Restash was developed using Typescript which gives you great code help if you are using an editor supporting it.
Getting Started
$ npm install restash -s
OR
$ yarn add restash
Restash
It's best or most flexibile if you break up your setup in a few small parts. Exposing the Provider to wrap your application, a store or init file to configure your store and finally using the exposed hook.
Initialize Restash
After providing your context above initialize Restash in a file called for example restash.tsx
for example. Then call createRestash
passing our options and then export our new Restash store.
; ; ;
Provide Context
Using our export from above expose the Provider
and wrap our application so it knows about our context.
; // NOTE: you can also provide the initialState and reducer// as params to your provider if you wish. If you provide// a reducer or inital state in your "createRestash" init// options those will be favored over params here.
Using Hook
We can now use our hook that's been created by our new Restash store.
; ;
Middleware, Persistence & Statuses
Initializing with middleware is very similar to Redux. You create your middleware then call a helper method called applyMiddleware then pass to your options. By default Restash supports thunks which are useful for async tasks.
Restash currently comes with only one middleware. That being a simple console logger. Redux middleware should work however in many cases.
; ; // The only logger options are that of styles// for colorizing and styling in your console.// see source for details. ; // The initial data state. initialState, // The middleware to process before updating state. middleware, // This is required when using Restash in an SSR environment. // Your state will load from this key. If present Restash // will load it. ssrKey: 'some_unique_ssr_key', // this will cause state to persist within localStorage. // when your app loads it will again look for this key. persistent: 'some_unique_name' // Statuses are used as the second dispatch argument. // The enable triggering things based on their state. statuses: }; ;
Status
Restash includes a handy second arg on dispatch that allows you to set the status on dispatching an event. This is useful for updating your view based on this status. For example when making an async data requests.
NOTE: this examples assumes you have added statuses as shown above in our options in the previous section.
;
Server Side React (SSR)
To use Restash with server side react you'll need to expose your state to the window of the application. This is common practice with other libs such as Redux. Here's an example using Restash with NextJS.
First ensure you've enabled Restash for use with SSR. You can other pass true to use the default SSR key or pass your own string.
const Provider useStore = ;
Using the default SSR key or the one you provided expose that to a custom _document.jsx (or _docuemnt.tsx) page in your NextJS /pages
directory.
const state = JSON;<script = />
See Below for Complete Example
const SSR_KEY = '__APP_STATE__'; // or use default __RESTASH_APP_STATE__ static async { const res = ctx; const app = res && resmeta ? resmeta : ; const initialProps = await Document; return ...initialProps app ; } { const app = thisprops; const state = JSON; return <Html> <Head /> <script = /> <body> <Main /> <NextScript /> </body> </Html> ; } ;
Docs
See https://blujedis.github.io/restash/
Change
See CHANGE.md
License
See LICENSE.md