This package has been deprecated

Author message:

stop using package

wilstated

State management with react hooks

Wilstated requires React 16.8.3 or later.

npm install wilstated --save

Example

1. Provider and configureStore

configureStore logger same redux-logger and localStorageWhiteList same redux-persist whitelist

import reducers from "./reducers";
import { Provider, configureStore } from "wilstated";
 
configureStore({
  logger: true,
  localStorageWhiteList: ["counter"],
  reducers
});
 
ReactDOM.render(
  <Provider>
    <App />
  </Provider>,
  document.getElementById("root")
);

2. Counter Component useGlobalState

import React, { memo } from "react";
import { useGlobalState } from "wilstated";
import { increment, decrement } from "../../actions";
 
function Counter() {
  const [counter, dispatchCounter] = useGlobalState("counter");
  return (
    <div>
      <button onClick={() => decrement(dispatchCounter)}>-</button>
      <span>{counter}</span>
      <button onClick={() => increment(dispatchCounter)}>+</button>
    </div>
  );
}
 
export default memo(Counter);

3. Consumer

import { Consumer } from "wilstated";
 
...
return (
  <Consumer>
    {({ counter }) => (
      <div>
        <span>{counter}</span>
      </div>
    )}
  </Consumer>
);

4. Action react hooks

import { INCREMENT } from "../../constants/contantTypes";
 
function increment(dispatch) {
  dispatch({
    type: INCREMENT
  });
}
 
export default increment;
 

Reducer react hooks

import { INCREMENT, DECREMENT } from "../../constants/contantTypes";
 
const initialState = 0;
 
function reducer(state, action) {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
}
 
export default [reducer, initialState];