Releases: web-ridge/react-ridge-state
Releases · web-ridge/react-ridge-state
4.1.6
4.1.5
4.1.4
Added .reset() function to go back to initialState
4.1.2
- Bugfix for #5 'useSelector' and 'useValue' and 'use', not triggering in some cases, since subscriber was not re-subscribed.
- Added test to prevent this issue in future
@iljadaderko thanks for feedback and finding this bug!
4.1.1
Bugfix were useSelector was called useSelect in some cases
4.1.0
Added useSelector hook + tests
Added optional callbacks to setState inside hooks
// if you only want to subscribe to part of your state (this example the first product)
const cartProducts = cartProductsState.useSelector((state) => state[0]);
// custom comparison function (only use this if you have heavy child components and the default === comparison is not efficient enough)
const cartProducts = cartProductsState.useSelector(
(state) => state[0],
(a, b) => JSON.stringify(a) === JSON.stringify(b)
);
4.0.1
4.0.0
We made our library even smaller from 700 bytes to 500 bytes 🏋️♀️ ⚡️ 🏋️♂️..
Our api changes will also make your application smaller since you need less imports.
Breaking changes
You can remove setRidgeState, getRidgeState, useRidgeState imports in v4.
setRidgeState migration
import {setRidgeState} from 'react-ridge-state'
import {cartProductState} from '../cartProductState'
setRidgeState(cartProductState, [{product:1}])
Will be changed in
import {cartProductState} from '../cartProductState'
cartProductState.set([{product:1}])
getRidgeState migration
import {getRidgeState} from 'react-ridge-state'
import {cartProductState} from '../cartProductState'
const products = getRidgeState(cartProductState)
Will be changed in
import {cartProductState} from '../cartProductState'
const products = cartProductState.get()
useRidgeState migration
import {useRidgeState} from 'react-ridge-state'
import {cartProductState} from '../cartProductState'
function Component(){
const [products,setProduct] = useRidgeState(cartProductState)
}
Will be changed in
import {cartProductState} from '../cartProductState'
function Component(){
const [products,setProduct] = cartProductState.use()
}
Features
- You can use callbacks in the global set
- You can use callbacks after state has set
cartProductsState.set(
(prevState) => [...prevState, { id: 1, name: "NiceProduct" }],
(newState) => {
console.log("New state is rendered everywhere");
}
);
- You can do things after state has been set from somewhere
const authState = newRidgeState<AuthState>(
getInitialState() || emptyAuthState,
{
onSet: (newState) => {
// save to local storage
localStorage.setItem(authStorageKey, JSON.stringify(newState))
},
}
)
3.1.0
- Make notifications to other components which use same state non-blocking
3.0.0
- Library internals 100% type safe (remove @ts-ignores)
- Easier API with removing the key which needed to be unique
Breaking changes
export const cartProductsState = newRidgeState<CartProduct[]>({
key: "CartState", // needs to be unique across other global state
defaultState,
});
To
export const cartProductsState = newRidgeState<CartProduct[]>([
{ id: 1, name: "Product" },
]);