Steady State

by villa

The easiest way to use Redux with React! All the awesomeness of Redux without all the fuss!

#NPM
npm install steadystate

#YARN
yarn add steadystate

Steady State requires Redux Toolkit and React-Redux. (Make sure you have your Redux store and provider set up first. There are step-by-step instructions on that further below).

Basic Usage

Once you have your Redux Store set up, creating global state with Steady State is as easy as this:

// todos.js
import { createSteadyState } from 'steadystate'

const todosState = createSteadyState({
    key: 'todos',
    initialState: {
        loading: false,
        items: [],
    },
})

export const { todos, useTodosState, setTodosState } = todosState

Thats it! The createSteadyState({...}) function accepts an object with a 'camelCase' key, an object representing initialState, and does the rest for you!

The returned value of createSteadyState({...}) is an object containing the following three items:

1. The reducer you add to your Redux store. This is the same as the key value. In this case, it would be todos. Add this to your Redux store like so:

   //store.js
   import { configureStore } from '@reduxjs/toolkit'
   
   import { todos } from './todos'
   
   export const store = configureStore({
       reducer: {
           todos,
       },
   })

2. A use[Key]State() hook - to be used for each piece of this state you would like to subscribe to. In this case it would be useTodosState().

   const loading = useTodosState('loading')
   const items = useTodosState('items')

3. A set[Key]State() hook - which returns an object containing all of the setters for your state, as well as a reset[Key] function for returning state to initialState. In this case, the hook would be setTodosState().

   const { setLoading, setItems, resetTodos } = setTodosState()

As you can see, Steady State automatically generates the setters and a reset for your state! You can just import these hooks wherever you'd like to use & set this global state!

Advanced Usage

If you would like to extend functionality, createSteadyState({...}) also accepts an actions key where you can add or overwrite actions using standard Redux Toolkit reducers, like so:

// todos.js
import { createSteadyState } from 'steadystate'

const initialState = {
    loading: false,
    items: [],
}

const actions = {
    addTodo: (state, { payload }) => {
        state.items.push(payload)
    },
    deleteTodo: (state, { payload }) => {
        state.items = state.items.filter(item => item.id !== payload.id)
    },
    updateTodo: (state, { payload }) => {
        const removed = state.items.filter(item => item.id !== payload.id)

        state.items = [...removed, payload]
    },
}

const todosState = createSteadyState({ key: 'todos', initialState, actions })

export const { todos, useTodosState, setTodosState } = todosState

Pretty cool, eh? :)

All the awesomeness of Redux without all the hassle!

Logs

By passing log: true into createSteadyState({...}), useful data will be logged to the console, as shown below:

// auth.js
import { createSteadyState } from 'steadystate'

const initialState = {
    auth: null,
    user: null,
    subscription: null,
    initialized: null,
}

const authState = createSteadyState({ key: 'auth', initialState, log: true })

export const { auth, useAuthState, setAuthState } = authState

and the console output will look like this:

;)

Steady State will also provide errors and suggested fixes in the console if your keys are not camelCase, to enforce best practices.

Setting up your Redux Store:

If you haven't hooked up Redux before, make sure those packages are also installed, and then follow along below:

#NPM
npm install @reduxjs/toolkit react-redux

#YARN
yarn add @reduxjs/toolkit react-redux

Step 1 - Create your Redux store

// src/state/store.js
import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
    reducer: {
        //add reducers here
    },
})

Step 2 - Wrap the Redux Provider component around the root component of your app. In Next.js, that would be in the _app.js file, for example.

// src/pages/_app.js
import { Provider } from 'react-redux'
import { store } from '../state/store'

export default function App({ Component, pageProps }) {
    return (
        <Provider store={store}>
            <Component {...pageProps} />
        </Provider>
    )
}

Step 3 - Create Some State, using Steady State!

// src/state/ui.js
import { createSteadyState } from 'steadystate'

const initialState = {
    loading: false,
    menuActive: false,
    isDragging: false,
    isTouch: null,
    lang: 'en',
}

const uiState = createSteadyState({ key: 'ui', initialState })

export const { ui, useUiState, setUiState } = uiState

Step 4 - Add your new reducer to your store, like this...

// src/state/store.js
import { configureStore } from '@reduxjs/toolkit'

import { todos } from './todos'
import { ui } from './ui'

export const store = configureStore({
    reducer: {
        todos,
        ui,
    },
})

Yay! Happy coding! :)