 Connector for react-js and fluxible-js. 

aprilmintacpineda

react-fluxible

  "description": " Connector for react-js and fluxible-js.",

    "@babel/plugin-proposal-class-properties": "^7.16.7",

    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",

    "@typescript-eslint/eslint-plugin": "^5.10.2",

    "@typescript-eslint/parser": "^5.10.2",

    "@typescript-eslint/typescript-estree": "^5.10.2",

    "babel-plugin-module-resolver": "^4.1.0",

    "babel-plugin-transform-object-rest-spread": "^6.26.0",

    "eslint-import-resolver-babel-module": "^5.3.1",

    "eslint-plugin-module-resolver": "^1.4.0",

    "eslint-plugin-react-hooks": "^4.3.0",

    "reinstallNodeModules": "rm -rf package-lock.json node_modules && npm i",

    "build": "rm -rf lib && mkdir lib && tsc",

    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx --fix",

    "prettier": "prettier \"*.js\" \"src/**/*.js\" --write",

    "lint": "npm run prettier && npm run eslint",

    "url": "git@gh_personal:aprilmintacpineda/react-fluxible.git"

    "url": "https://github.com/aprilmintacpineda/react-fluxible/issues"

  "homepage": "https://github.com/aprilmintacpineda/react-fluxible#readme",

![npm](https://img.shields.io/npm/dt/react-fluxible) ![npm](https://img.shields.io/npm/dm/react-fluxible) ![npm](https://img.shields.io/npm/dw/react-fluxible)

Connector for [react-js](https://github.com/facebook/react/) and [fluxible-js](https://github.com/aprilmintacpineda/fluxible-js) which allows you to access the store inside your components and rerender your component when the store changes.

From v6, the changelogs on the project will be kept in [CHANGELOG](./CHANGELOG.md), which follows [keepachangelog](https://keepachangelog.com/en/1.0.0/).

https://user-images.githubusercontent.com/21032419/139817756-c5bf348e-7941-4000-9205-a165ee3ddccc.mp4

## react-fluxible does NOT rely on a wrapper on top of your app.

Unlike `react-redux`, `react-fluxible` does **NOT** rely on a global provider on top of your app. This makes it more performant and independent. You simply have to choose between hooks or HOCs.

Due to the architecture of fluxible-js, when you update the store, `react-fluxible` does **NOT** rerender all components connected to the store. It only rerenders components that are using the store key that was updated.

This means that if you have 100 components connected to the global store, and you updated a store key called `authUser`, and you only have 5 components connected to the store that are using `authUser`, then only those 5 components will be rerendered and given the updated values.

## react-fluxible does not do anything about the store

It does not set, reset or update the store, it only does the following:

2. Wait for updates on the store keys that you are using, i.e., `authUser`.

3. Rerender your component with the new values when that/those store key/s was/were updated.

4. Disconnect to the store when your component unmounts, this is necessary for cleanup.

Refer to [fluxible-js docs](https://github.com/aprilmintacpineda/fluxible-js#usage) for more information on initialization.

You need to tell `react-fluxible` to what store to connect to via `createFluxibleHook`, and then it returns a hook that can connect to that store.

import { createStore } from 'fluxible-js';

import { createFluxibleHook } from 'react-fluxible';

const globalStore = createStore<typeof initialStore>({

const useGlobalStore = createFluxibleHook(globalStore);

  const { token, isLoggedIn } = useGlobalStore((store) => {

  // do something with the `token` and `isLoggedIn`

`createFluxibleHook` accepts a store instance as argument and returns a react hook that you can use in your components, the react hook accepts a function that function should return an object that is the store states that you want to watch in that component. In the example above, the component will watch `token` and `isLoggedIn`, every time the `token` or `isLoggedIn` changes, this component will be rerendered with the new values of the `token` and `isLoggedIn`.

Create a new file called **globalStore.ts**

export const globalStore = createStore<typeof initialStore>({

export const useGlobalStore = createFluxibleHook(globalStore);

Instead of importing `updateStore` and the likes directly from `fluxible-js`, you will need to `import { globalStore } from 'globalStore';` and use the methods from `globalStore`.

Instead of importing `useFluxibleStore` directly from `react-fluxible`, you will need to `import { useGlobalStore } from 'globalStore';`.

		{
		"name": "react-fluxible",
		"version": "6.0.3",
		"version": "6.0.4",
		"description": " Connector for react-js and fluxible-js.",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

		@@ -62,3 +62,3 @@ ![npm](https://img.shields.io/npm/dt/react-fluxible) ![npm](https://img.shields.io/npm/dm/react-fluxible) ![npm](https://img.shields.io/npm/dw/react-fluxible)

		const globalStore = createStore<typeof initialStore>({
		const globalStore = createStore({
		initialStore
		@@ -98,3 +98,3 @@ });

		export const globalStore = createStore<typeof initialStore>({
		export const globalStore = createStore({
		initialStore
		@@ -101,0 +101,0 @@ });

Worsened metrics