w3-redux/README.md

redux and redux thunk tools

<h2>W3-Redux<h2>
<h3>**Powerful Confiquration For Redux**<h3>
<ul>
 <li>Optimize</li>
 <li>Async Support - Using Thunk Middleware </li>
 <li>Dynamicly Create And Combine Reducers And Provide Store</li>
 <li>Provide Useful Hooks For Managing State</li>
 <li>It Uses Redux Devtools</li>
</ul>

## Config:

```js
import { createStore } from "w3-redux";

const reducers = [
  { combineName: 'anyName...', reducers: { anyReducerName: initstate, ... } }
];

const options = { enableDevtools: true, nextWrapp: false };

const { Provider, store } = createStore(reducers, options);
```

## Use:

```js
import { useReducer } from "w3-redux";

const { state, setState, clearState, types, dispatch } = useReducer("combineName", "reducerName");

useEffect(() => {
  // Set State : Keep Prev Data , And OverWrite Data In Specified Scope
  setState({ poperty: value }, "scope1");

  // Clear State : Reset Prev Data , And Set Data In Specified Scope
  clearState({ poperty: value }, "scope1.scope2");

  // Custom Action
  dispatch({ type: types.set, payload: { values: {}, scope: "" } });
}, []);
```

## React Example:

```js
import { createStore } from "w3-redux";
import React from "react";
import ReactDOM from "react-dom/client";

// ---Config--- //

const homePageState = { productList: [] };
const dashboardPageState = { users: [], profile: {} };
const landingTemplateState = { nav: { collapse: false }, counter: 0 };

const reducers = [
  { combineName: "page", reducers: { home: homePageState, dashboard: dashboardPageState } },
  { combineName: "template", reducers: { landing: landingTemplateState } },
];

const options = { enableDevtools: true, nextWrapp: false };

const { Provider, store } = createStore(reducers, options);

// ---Use--- //
const { state, setState, clearState, types, dispatch } = useReducer("template", "home");
const { counter, nav } = state;
const { collapse } = nav;

const rootComponent = (
  <Provider store={store}>
    <div>
      <span onClick={() => setState({ collapse: !collapse }, "nav")}>toggle landing template nav</span>
      <br />
      <span onClick={() => setState({ counter: counter + 1 })}>increament landing template counter</span>
      <br />
      <span>counter : {counter}</span>
      <br />
      <span onClick={() => clearState()}>reset landing template state</span>
      <br />
      <span onClick={() => dispatch({ payload: { values: { counter: 100 }, scope: "" }, type: types.set })}>
        manual dispatch action - change counter landing template state
      </span>
    </div>
  </Provider>
);

const rootEl = document.getElementById("root");

ReactDOM.createRoot(rootEl).render(rootComponent);
```