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:
-
The reducer you add to your Redux store. This is the same as the
key
value. In this case, it would betodos
. 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, }, })
-
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 beuseTodosState()
.const loading = useTodosState('loading') const items = useTodosState('items')
-
A
set[Key]State()
hook - which returns an object containing all of the setters for your state, as well as areset[Key]
function for returning state toinitialState
. In this case, the hook would besetTodosState()
.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! :)