1- # spyna- react-store
1+ # @ spyna/ react-store
22
33> React app state management that uses a storage
44
5-
6-
7- [ ![ NPM] ( https://img.shields.io/npm/v/spyna-react-store.svg )] ( https://www.npmjs.com/package/spyna-react-store ) [ ![ JavaScript Style Guide] ( https://img.shields.io/badge/code_style-standard-brightgreen.svg )] ( https://standardjs.com )
8-
5+ [ ![ NPM] ( https://img.shields.io/npm/v/@spyna/react-store.svg )] ( https://www.npmjs.com/package/@spyna/react-store ) [ ![ JavaScript Style Guide] ( https://img.shields.io/badge/code_style-standard-brightgreen.svg )] ( https://standardjs.com )
96[ ![ CircleCI] ( https://img.shields.io/circleci/project/github/Spyna/react-store/master.svg?style=flat-square )] ( https://img.shields.io/circleci/project/github/Spyna/react-store/master.svg?style=flat-square )
10-
11- [ ![ Bundle Phobia] ( https://img.shields.io/bundlephobia/minzip/spyna-react-store.svg?style=flat-square )] ( https://img.shields.io/bundlephobia/minzip/spyna-react-store.svg?style=flat-square )
12-
13- [ ![ Npm version] ( https://img.shields.io/npm/v/spyna-react-store.svg?style=flat-square )] ( https://img.shields.io/npm/v/spyna-react-store.svg?style=flat-square )
14-
15- [ ![ Npm downloads] ( https://img.shields.io/npm/dt/spyna-react-store.svg?style=flat-square )] ( https://img.shields.io/npm/dt/spyna-react-store.svg )
16-
17- [ ![ React Version] ( https://img.shields.io/npm/dependency-version/spyna-react-store/peer/react.svg?style=flat-square )] ( https://img.shields.io/npm/dependency-version/spyna-react-store/peer/react.svg?style=flat-square )
18-
7+ [ ![ Bundle Phobia] ( https://img.shields.io/bundlephobia/minzip/@spyna/react-store.svg?style=flat-square )] ( https://img.shields.io/bundlephobia/minzip/@spyna/react-store.svg?style=flat-square )
8+ [ ![ Npm version] ( https://img.shields.io/npm/v/@spyna/react-store.svg?style=flat-square )] ( https://img.shields.io/npm/v/@spyna/react-store.svg?style=flat-square )
9+ [ ![ Npm downloads] ( https://img.shields.io/npm/dt/@spyna/react-store.svg?style=flat-square )] ( https://img.shields.io/npm/dt/@spyna/react-store.svg )
10+ [ ![ React Version] ( https://img.shields.io/npm/dependency-version/@spyna/react-store/peer/react.svg?style=flat-square )] ( https://img.shields.io/npm/dependency-version/@spyna/react-store/peer/react.svg?style=flat-square )
1911[ ![ codecov] ( https://codecov.io/gh/Spyna/react-store/branch/master/graph/badge.svg )] ( https://codecov.io/gh/Spyna/react-store )
20-
2112[ ![ codefactor] ( https://www.codefactor.io/repository/github/Spyna/react-store/badge?style=flat-square )] ( https://www.codefactor.io/repository/github/spyna/react-store/overview/master )
2213
2314
@@ -29,39 +20,29 @@ https://spyna.github.io/react-store/
2920## Install
3021
3122``` bash
32- npm install --save spyna- react-store
23+ npm install --save @ spyna/ react-store
3324```
3425
3526## Usage
3627
37- TODO
28+
29+ ### Create store
3830
3931``` jsx
32+ // App.js
4033import React , { Component } from ' react'
41- import { createStore , withStore } from ' spyna-react-store'
42-
43- class MyComponent extends Component {
44- render () {
45- return (
46- < p> My Store: {this .props .store .amount }< / p>
47- )
48- }
49- }
50-
51- const ConnectedComponent = withStore (MyComponent);
34+ import { createStore } from ' @spyna/react-store'
5235
5336class App extends Component {
5437 render () {
5538 return (
5639 < div>
5740 < h1> My App< / h1>
58- < p>
59- Uses a store to share data between different Components, Routes,
60- Views, etc...
61- < / p>
62- < div className= " container" >
63- < ConnectedComponent / >
64- < / div>
41+ {/*
42+ children here
43+ <ConnectedComponent />
44+ */ }
45+
6546 < / div>
6647 )
6748 }
@@ -75,10 +56,68 @@ const initialValue = {
7556 }
7657}
7758
78- export default createStore (initialValue)(App)
59+ export default createStore (App, initialValue)
60+ ```
61+
62+ You can pass the * initial store value* as the second argumento of the function ` createStore ` .
63+
64+ ### connect a component to the store
65+
66+ ``` jsx
67+ // MyComponent
68+ import React , { Component } from ' react'
69+ import { withStore } from ' @spyna/react-store'
70+
71+ class MyComponent extends Component {
72+ render () {
73+ return (
74+ < p> My Amount: {this .props .store .get (' amount' < / p>
75+ )
76+ }
77+ }
78+
79+ const ConnectedComponent = withStore (MyComponent);
80+ ```
81+
82+ ### Set data in store
83+
84+ ``` jsx
85+ this .props .store .set (' a_key' ' a value'
86+ this .props .store .set (' another_key' : ' another value'
87+ ```
88+
89+ ### Read data from the store
7990
91+ ``` jsx
92+ const a_key = this .props .store .get (' a_key'
93+ const another_key = this .props .store .get (' another_key'
8094```
8195
96+ ### Remove data from the store
97+
98+ ``` jsx
99+ this .props .store .remove (' a_key' ' a value'
100+ ```
101+
102+ ### Get all data from the store
103+
104+ ``` jsx
105+ const store = this .props .store .getState ()
106+ ```
107+
108+ ## Contributing
109+
110+ Pull request and contributions are welcome.
111+ The ` develop ` branch is the one where you want to develope your changes.
112+ The ` master ` branch is the source code of the current release.
113+ The ` gh-pages ` branch is mainteined by CI and contains the documentation and example. You don't need to use it.
114+
115+
116+ * Add test for your changes
117+ * Add documentation and examples of your changes under the folder ` example `
118+ * Run ` yarn prettier ` or ` npm run prettier ` to format the source of the project
119+ * Thank you
120+
82121## License
83122
84123MIT © [ Spyna] ( https://github.com/Spyna )
0 commit comments