https://github.com/wildhoney/reactstoreprovider
Another way to manage global state in any given component tree using providers and hooks.
https://github.com/wildhoney/reactstoreprovider
react-hooks react-state react-state-management state-management
Last synced: 5 months ago
JSON representation
Another way to manage global state in any given component tree using providers and hooks.
- Host: GitHub
- URL: https://github.com/wildhoney/reactstoreprovider
- Owner: Wildhoney
- License: mit
- Created: 2019-07-26T17:42:50.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T05:27:33.000Z (over 3 years ago)
- Last Synced: 2025-03-18T13:23:17.725Z (about 1 year ago)
- Topics: react-hooks, react-state, react-state-management, state-management
- Language: JavaScript
- Homepage: https://react-store-provider.herokuapp.com/
- Size: 2.2 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Store Provider
> Another way to manage global state in any given component tree using providers and hooks.
* **npm**: `npm react-store-provider`
* **yarn**: `yarn add react-store-provider`
## Getting Started
You must setup your store exporting `initialState`, `actions`, `reducer` – `initialState` is the initial state of the store and should be a standard object, `reducer` is a standard Redux-esque reducer function for manipulating the state, and the `actions` can either be a standard object or a function that binds the `dispatch`.
```javascript
export const initialState = { label: 'foo' };
const actionTypes = {
update: Symbol('update')
}
export const actions = dispatch => ({
update: payload => dispatch({ type: actionTypes.update, payload }),
});
export function reducer(state, action) {
switch (action.type) {
case actionTypes.update:
return { ...state, label: action.payload };
default:
return state;
}
}
```
Once your store is all setup use `Store` to initialise it and then `getStore` to get a reference to the hook. You must have the `StoreProvider` in your tree before using the `useStore` hook.
```javascript
import { Store } from 'react-store-provider';
import * as store from './foobar-store';
export default function Parent({ children }) {
return (
{children}
);
}
```
After adding the `StoreProvider` to your tree, you can happily use the `useStore` in all child components. When you dispatch any actions from your child components and the state is updated, the state will be updated in all components that utilise the state from the provider.
```javascript
import { useStore } from 'react-store-provider';
export default function Child() {
const [store, actions] = useStore('foobar');
return (
actions.update('bar')}>
{store.label}
);
}
```