+
+
+ ```bash
+ yarn add use-redux-state-hook@beta redux react-redux @reduxjs/toolkit
+ ```
+
+
+
+
+
+ ```bash
+ npm install --save use-redux-state-hook@beta redux react-redux @reduxjs/toolkit
```
diff --git a/website/docs/intro.md b/website/docs/intro.md
index 28cf63a..8db0765 100644
--- a/website/docs/intro.md
+++ b/website/docs/intro.md
@@ -5,8 +5,60 @@ sidebar_label: Introduction
slug: /
---
-## Overview
+## `Overview`
`use-redux-state-hook` allows you to create redux states at runtime for your react components without creating static actions and reducers.
-It was also designed to solve react's unnecessary re-render issue by using `useMemoSelector` api.
+It was also designed to solve react's unnecessary re-render issue by using `useMemoSelector` api and to improve your app's performance.
-`use-redux-state-hook` was also created to improve your app's performance.
+## `Problems solved`
+### **handles unnecessary selectors re-rendering**
+`use-redux-state-hook` makes sure selectors doesn't re-render component when state has no changes.
+### **reduces redux code boilerplate**
+Say bye to redux action/reducers boilerplates!
+with redux, before you create states you have to at least define the store in advance in a similar way to example below.
+
+## `Example`
+```js
+// reducer.js
+const INIT_STATE = {
+ state1: 'one',
+ state2: 'two',
+};
+
+const reducer = (state = INIT_STATE, {type, payload}) => {
+ switch (type) {
+ case 'addState1':
+ return {...state, state1: 'ones'}
+ default:
+ case 'addState2':
+ return {...state, state2: 'twos'}
+ default:
+ return state;
+ }
+};
+export default reducer;
+```
+Sometimes you would need to move your small react components states to redux store, so for every components state you would have to define them in advance.
+This can be redundant and unnecessary.
+But `use-redux-state-hook` found a way to create redux state much easier and dynamically without writing redundant codes.
+`use-redux-state-hook` can make you have similar states above with few lines of codes.
+```jsx
+const Component = () => {
+ const {setState, getState} = useReduxState({
+ name: 'component_state',
+ state: {
+ state1: 'one',
+ state2: 'two',
+ }
+ });
+
+ useEffect(() => {
+ console.log(getState()) // {state1: 'one', state2: 'two'}
+
+ setState({
+ state1: 'ones',
+ state2: 'twos',
+ });
+ console.log(getState()) // {state1: 'ones', state2: 'twos'}
+ }, [])
+}
+```
diff --git a/website/docs/usage.md b/website/docs/usage.md
index 28536df..bf121a3 100644
--- a/website/docs/usage.md
+++ b/website/docs/usage.md
@@ -5,7 +5,7 @@ sidebar_label: Usage
slug: /usage
---
-## Setup
+## `Setup`
```js
import { configureStore } from '@reduxjs/toolkit'
@@ -32,7 +32,7 @@ const store = configureStore({
setConfig({cleanup: false})
```
-## Basic Usage
+## `Basic Usage`
```jsx
import React, { Component } from 'react'
@@ -52,9 +52,7 @@ const Usage = () => {
Current Count: {count}
- setState((prevState) => ({ ...prevState, locale }))
- }
+ onChange={({ target: { value: locale } }) => setState({locale})}
value={locale}
/>