Welcome to Fusion React: A Comprehensive Guide

Fusion React is a powerful library that facilitates the integration of React with FusionJS, providing an array of useful APIs designed to streamline your development process. This guide introduces Fusion React and explores several of its APIs through practical examples.

Getting Started with Fusion React

To begin using Fusion React, first make sure you have it installed:

npm install fusion-react

API Examples

1. useDispatch

The useDispatch hook provides a way to dispatch actions to the Redux store. Here’s a quick example:

import { useDispatch } from 'fusion-react';

function MyComponent() {
  const dispatch = useDispatch();
  const handleClick = () => {
    dispatch({ type: 'MY_ACTION' });
  };

  return (
    Click me
  );
}

2. useSelector

The useSelector hook allows you to extract data from the store state. Here’s how it works:

import { useSelector } from 'fusion-react';

function MyComponent() {
  const count = useSelector(state => state.count);

  return (
    
Count: {count}
  );
}

3. withRedux

The withRedux Higher Order Component (HOC) integrates Redux with your Fusion.js application. Example:

import { Provider } from 'react-redux';
import { withRedux } from 'fusion-react';
import { createStore } from 'redux';

const store = createStore((state = { count: 0 }, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
});

function App({ store }) {
  return (
    
      
    
  );
}

export default withRedux(store)(App);

4. useFusion

The useFusion API gives you access to services registered in Fusion.js. Here’s an example:

import { useFusion } from 'fusion-react';

function MyComponent() {
  const fusionContext = useFusion();

  console.log(fusionContext);

  return (
    
Check console for Fusion context details
  );
}

Application Example

Below is a comprehensive example demonstrating the use of all the above APIs in a simple application:

import React from 'react';
import { render } from 'react-dom';
import { Provider, useDispatch, useSelector } from 'fusion-react';
import { withRedux } from 'fusion-react';
import { createStore } from 'redux';

const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(counterReducer);

function Counter() {
  const dispatch = useDispatch();
  const count = useSelector(state => state.count);
  
  return (
    

      
Count: {count}
       dispatch({ type: 'INCREMENT' })}>Increment
    
  );
}

function App() {
  return (
    
      
    
  );
}

export default withRedux(store)(App);

render(, document.getElementById('root'));

By utilizing these APIs and techniques, you can create a robust and scalable application with Fusion React.

Hash: 028d109b63df89c4f7f4b24dc2bb71bbe78672676dff28336e0caced395411fb