react-tienda
v1.0.0
Published
React Tienda is a lightweight and intuitive global state management library for React, designed to easily share state across components with minimal setup.
Downloads
93
Maintainers
Readme
Got it! I'll add the extra method for updating the state using a previous state callback in the documentation. Here's the revised version:
React Tienda - Lightweight Global State Management
React Tienda is a simple, lightweight yet powerful tool for managing global state in React applications. It allows you to easily share state between components using hooks, minimizing prop drilling and reducing the complexity of passing data between deeply nested components.
One of the big advantages is the ease of use, as it's very similar to using the normal useState
hook.
Introduction
React Tienda's createGlobalStore
function helps you create a global store where the state is shared across all components that utilize the store. The state is managed using a hook, and you can access or modify the global state with ease.
Features:
- Global state: Create a global store that can be shared among multiple components.
- State access: Use hooks to get and set the state in your components.
- Selective rerendering: Specify the keys of the store you want to watch to minimize unnecessary component rerenders.
- Global scope management: Directly access or modify the global state outside of the React component lifecycle.
Installation
To get started, install the package using npm or yarn:
npm install react-tienda
or
yarn add react-tienda
Usage
Creating a Global Store
You can create a global store using the createGlobalStore
function, which accepts an initial state object and optional actions.
import createGlobalStore from "react-tienda";
export const useStore = createGlobalStore(
{ count: 0, name: 'Hello' },
{
increment: (state, setstate) => (name: string) => {
if (name === 'foo') {
setstate({ count: state.count + 4 });
} else {
setstate({ count: state.count + 2 });
}
},
}
);
The createGlobalStore
function generates a hook (useStore
) that components can use to connect with the global state.
Example
// store.js
import createGlobalStore from "react-tienda";
// Create a global store with initial values and actions
export const useStore = createGlobalStore(
{ count: 0, name: "Hello" },
{
increment: (state, setstate) => (name: string) => {
if (name === 'foo') {
setstate({ count: state.count + 4 });
} else {
setstate({ count: state.count + 2 });
}
},
}
);
// Component.js
import React from "react";
import { useStore } from "./store";
const Counter = () => {
const [storeState, { setStoreState, actions }] = useStore(['count']); // Specify "count" to optimize rerendering
return (
<div>
<p>Count: {storeState.count}</p>
<button onClick={() => setStoreState({ count: storeState.count + 1 })}>
Increment
</button>
<br />
<button onClick={() => actions.increment()}>increment by action</button>
<br />
<button
onClick={() => setStoreState(prev => ({ count: prev.count + 4 }))}
>
increment by prev
</button>
</div>
);
};
export default Counter;
Different Methods for Updating State
In this Counter
component, the global count
state is updated in three different ways:
Direct state manipulation:
setStoreState({ count: storeState.count + 1 })
updates the state directly by passing in the updated object.Using actions:
actions.increment()
updates the state by dispatching an action, where the action logic is predefined in the global store.Using a previous state callback:
setStoreState(prev => ({ count: prev.count + 4 }))
uses a functional update to calculate the next state based on the previous state, which is useful when you need to ensure the update is applied in a race condition-free manner.
Global State Access - Advanced (Rare Use Cases)
For advanced and rare use cases, you can directly access or modify the global state using the following methods:
useStore.getGlobalState()
: Get the entire global state outside a React component.useStore.setGlobalState(updates)
: Set the global state outside a React component.
// Access the entire global state
const currentState = useStore.getGlobalState();
// Update the global state outside of a component
useStore.setGlobalState({ name: "New Name" });
Optimizing Rerendering
To prevent unnecessary rerendering, it's recommended to specify the store keys that your component is interested in when using the useStore
hook. This helps React to only rerender components when the relevant pieces of state change.
// Only rerender when "count" changes
const [storeState, setStoreState] = useStore(["count"]);
Advanced Usage
- Accessing global scope: Use
useStore.getGlobalState()
to fetch the global state, anduseStore.setGlobalState()
to update it outside of a React component. - Minimizing rerenders: Always pass the keys of the store that your component is concerned with as an array to
useStore
.
API
createGlobalStore(initialState, actions?, storeConfigs?)
- Description: Creates a global store where state is shared among components, with optional actions and configurations.
- Parameters:
initialState
(object): The initial state of the global store.actions?
(object): An optional object of actions, where each key is a function to modify the state.storeConfigs?
(object): Optional store configurations.
- Returns:
- A custom hook that allows components to access and update the state, and an object containing the available actions.
Example:
export const useStore = createGlobalStore({ a: 1, b: 2 }, {
increment: (state, setstate) => () => {
setstate({ a: state.a + 1 });
}
});
useStore([keys])
- Description: A hook returned from
createGlobalStore
. Use this to access or update the global state. - Parameters:
keys
(Array of strings): A list of keys from the global store that the component cares about, which reduces unnecessary rerenders.
- Returns:
- A tuple: the current state, a setter function to update the state, and an object containing any defined actions.
Example:
const Component = () => {
const [storeState, { setStoreState, actions }] = useStore(["a"]);
return (
<button onClick={() => setStoreState({ a: 3 })}>Click me</button>
);
};
License
This project is licensed under the MIT License.