react-flux-context

A global store is created by context hook with flux pattern for react apps.

bundle size:

• unpackage size: 4.4KB
• gzip size: 1.6KB

You can structure your store by reducers, actions, types like a redux pattern, but it has a easier setup to use it and very small size.

(Do not use it in ssr, its not ready yet)!

And it has a redux-thunk and redux-persist usage too with very simple config.

List

• react-flux-context
• Installation
• store folder structure
  • types
  • reducers
  • actions
  • create collection
  • Project Example
• useSelector
• useDispatch
• useMultiDispatch
• useFluxContext
• useFluxMultiContext
• useRefStore
• Storage
• License

Installation

with npm:

npm install --save react-flux-context

with yarn:

yarn add react-flux-context

go to List

store folder structure

First, create a store folder in your src folder in your project directory and then create three folder with the names actions, reducers and types in store folder.

types:

It shows user's action type and ux(user experience like loading for api request, ... ) in actions.

In your types folder, you create a file according to your requirements

export const REGISTER_REQUEST = "REGISTER_REQUEST";

export const REGISTER_SUCCESS = "REGISTER_SUCCESS";

export const REGISTER_FAILURE = "REGISTER_FAILURE";

go to List

reducers

In reducers files, set your initial state and reducer which is relevant to your action types

import {
  REGISTER_REQUEST,
  REGISTER_SUCCESS,
  REGISTER_FAILURE,
} from "../types/authTypes";

export const authState = {
  role: null,
  token: null,
  isLogin: false,
  loading: false,
};

export const authReducer = (state, { type, payload }) => {
  switch (type) {
    case REGISTER_REQUEST:
      return {
        ...state,
        loading: true,
      };

    case REGISTER_SUCCESS:
      return {
        ...payload,
        isLogin: true,
        loading: false,
      };

    case REGISTER_FAILURE:
      return {
        ...payload,
        loading: false,
      };

    default:
      throw new Error("there is no type for authReducers");
  }
};

go to List

actions

Action is to handle users actions.

Pattern in react-flux-context is a little different. when you want to create actions in redux, type keyname must be exist, but in this package you have to set key keyname too.

The reason is in the react-flux-context that we use selector pattern for better perfomance instead of using combination pattern for reducers! It means for example, when you put reducer in user keyword in your store collection, you have to set key in your dispatch where you set your reducer in collection like auth, user or , ... etc. Then you have to set dispatch argument in your actions as topest and first argument in your function.

If you want to give data to your reducers, set a payload as keyword. (like a fetching data from api and saving in store)

(This action pattern works like a redux-thunk)

import {
  REGISTER_REQUEST,
  REGISTER_SUCCESS,
  REGISTER_FAILURE,
} from "../types/authTypes";
import { loginApi } from "../../services";

// Login actions
const authRequsetAction = (dispatch) => {
  dispatch({ key: "auth", type: REGISTER_REQUEST });
};

const authSuccessAction = (dispatch, payload) => {
  dispatch({ key: "auth", type: REGISTER_SUCCESS, payload });
};

const authFailureAction = (dispatch) => {
  dispatch({ key: "auth", type: REGISTER_FAILURE });
};

export const authLoginAction = (dispatch) => {
  authRequsetAction(dispatch);

  loginApi()
    .then((res) => {
      authSuccessAction(dispatch, res);
    })
    .catch((err) => {
      authFailureAction(dispatch);
    });
};

go to List

create collection

To initialize your store, you must create a store collection and put it in FluxContextProvider store as a prop.

If you want to persist your data, set a storage type and storageKey

storage: local (localStorage) session (sessionStorage)

storageKey: "some text"

import { FluxContextProvider } from "react-flux-context";

import { authState, authReducer } from "./reducers/authReducer";
import { userState, usersReducer } from "./reducers/usersReducer";

const storeCollection = {
  user: {
    state: userState,
    reducer: usersReducer,
  },
  auth: {
    // persist your data in storage automatically
    // it works like a redux-persist but has a very easier config
    state: authState,
    reducer: authReducer,
    storage: "local", // local | session
    storageKey: "_myAuthKey_",
  },
};

export default function ContextProvider({ children }) {
  return (
    <FluxContextProvider store={storeCollection}>
      {children}
    </FluxContextProvider>
  );
}

go to List

useSelector

Select your state with callback function or set nulish data to get states.

import { useSelector } from "react-flux-context";

function Component() {
  const userData = useSelector((data) => data.user);
  // or
  const { user } = useSelector();

  return (
    <div>
      <p> user fullname: {userData.fullname} </p>
      <p> user fullname: {user.fullname} </p>
    </div>
  );
}

go to List

useDispatch

useDispatch get actions in param and then dispather is ready to be used.

import { useDispatch } from "react-flux-context";
import { userAction } from "../store/actions/userAction";

function Component() {
  const userDispath = useDispatch(userAction);

  useEffect(() => {
    userDispath();
  }, []);

  return (
    <div>
      // or you can use with click event
      <button onClick={() => userDispath()}>get user</button>
    </div>
  );
}

go to List

useMultiDispatch

You can use multiple actions with useMultiDispatch

import { useMultiDispatch } from "react-flux-context";
import { userAction } from "../store/actions/userAction";
import { logoutAction } from "../store/actions/authAction";

function Component() {
  const [userDispath, logoutAction] = useMultiDispatch([
    userAction,
    logoutAction,
  ]);

  useEffect(() => {
    userDispath();
  }, []);

  return (
    <div>
      // or you can use with onClick and other event!
      <button onClick={() => logoutAction()}>get user</button>
    </div>
  );
}

go to List

useFluxContext

First argument is like a useSelector. Second argument is like a useDispatch .

import { useMultiDispatch } from "react-flux-context";
import { userAction } from "../store/actions/userAction";

function Component() {
  const [userData, userDispatch] = useFluxMultiContext(
    (data) => data.user,
    userAction
  );

  return <> ... </>;
}

go to List

useFluxMultiContext

First argument is like a useSelector. Second argument is like a useMultiDispatch .

import { useMultiDispatch } from "react-flux-context";
import { logoutAction } from "../store/actions/authAction";
import { userAction } from "../store/actions/userAction";

function Component() {
  const [{ user, auth }, [logoutDispatch, userDispatch]] = useFluxMultiContext(
    null,
    [logoutAction, userAction]
  );

  return <> ... </>;
}

go to List

useRefStore

You can use it for binary stream data in webrtc project or styling for motions, ... .

useRefStore(initialRefStore, isFunction = false)

You can store a function in useRefStore to use it anywhere

useRefStore(() => console.log('hi'), true)

import { useRef } from "react";
import { useRefStore } from "react-flux-context";

function Component() {
  const elmRef = useRef();
  const [myRef, setMyRef] = useRefStore(0);

  const moveForward = () => {
    setMyRef(myRef.current + 10);
    ref.current.style.top = myRef.current;
  };

  return (
    <div>
      <button onClick={moveForward}>move to forward</button>

      <div ref={elmRef}>translate this element</div>
    </div>
  );
}

go to List

Storage

Get or set data from localStorage or sessionStorage with Storage by buttom keywords:

• getLocal
• setLocal
• getSession
• setSession

import { Storage } from 'react-flux-context';

fuction api() {
  const prePath = Storage.getLocal('__auth__');
  console.log(prePath.role)

  Storage.setLocal('__user__', {
    first_name: 'jack',
    second_name: 'jaki',
    age: 12
  }})

}

go to List

License

MIT © mohammadbrzbrz72