https://github.com/pete-murphy/react-conflux-variation

Experimenting with a different API for `react-conflux`
https://github.com/pete-murphy/react-conflux-variation

Last synced: 9 days ago
JSON representation

Experimenting with a different API for `react-conflux`

• Host: GitHub
• URL: https://github.com/pete-murphy/react-conflux-variation
• Owner: pete-murphy
• Created: 2019-05-24T21:47:03.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T22:36:35.000Z (almost 2 years ago)
• Last Synced: 2023-07-09T20:26:48.504Z (over 1 year ago)
• Language: JavaScript
• Size: 3.6 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
🚧 **This is a very rough proof-of-concept.**

To see this example running in a CodeSandbox: https://codesandbox.io/s/19ylq

### Re-imagining the `react-conflux` API

[`react-conflux`](https://github.com/dustinmyers/react-conflux) is a nice, lightweight state management library for React applications. I wanted to try to explore a possibility for the API that would reduce some of the boilerplate even further while maintaining the minimalism and simplicity of the library. To show by example the difference in the proposed API, this is from the counter app example from the `react-conflux` repo:

```js

// App.js

import React from "react"

import { StateProvider } from "react-conflux"

import { counterReducer } from "store/reducers/counterReducer"

import { titleReducer } from "store/reducers/titleReducer"

import { CounterContext, TitleContext } from "store/contexts"

import Counter from "./components/Counter"

const App = () => {

  return (

    

      

        

      

    

  )

}

export default App

```

With the re-imagined API this might be:

```js

import React from "react"

import createConflux from "react-conflux"

import { counterReducer } from "store/reducers/counterReducer"

import { titleReducer } from "store/reducers/titleReducer"

import Counter from "components/Counter"

const [CounterProvider, useCounterValue] = createConflux(counterReducer)

const [TitleProvider, useTitleValue] = createConflux(titleReducer)

export { useCounterValue, useTitleValue }

const App = () => {

  return (

    

      

        

      

    

  )

}

export default App

```

The diff

```diff

  import React from 'react';

- import { StateProvider } from 'react-conflux';

+ import createConflux from 'react-conflux';

  import { counterReducer } from 'store/reducers/counterReducer';

  import { titleReducer } from 'store/reducers/titleReducer';

- import { CounterContext, TitleContext } from 'store/contexts';

  import Counter from 'components/Counter';

+ const [CounterProvider, useCounterValue] = createConflux(counterReducer);

+ const [TitleProvider, useTitleValue] = createConflux(titleReducer);

+ export { useCounterValue, useTitleValue };

  const App = () => {

    return (

-     

-       

+     

+       

          

-       

-     

+       

+     

    );

  };

  export default App;

```




At the `App.js` level, the reduction in boilerplate isn't immediately obvious, in fact it adds a total of two lines. The benefit though is that there is no need to create your own contexts as you would with the former example; the `store/contexts` directory and user calls to `React.createContext` can be completely extracted and taken care of by the library code.

There is also no need to import the context instance at any consumer components, as that's already captured in `useCounterValue` for example.

To visualize the difference in terms of dependencies between files, the original API might play out like so

![](./diagrams/Artboard1.png)

The reimagined API dependencies might look like

![](./diagrams/Artboard2.png)

### Todo:

- I'm not sure what the implications are for performance, haven't tested this beyond the super-simple app found in this repo