redux-inst v0.8.0

Redux-Inst

Allows you to write a component once and reuse it an unlimited number of times!
Just passing the "inst" parameter at the call location. The state of each instance will be independent.

Example of using a component based on Redux-Inst

Calling the same component, but with its own independent state.
It is very easy to re-use, there is no limit on the number of instances!

<MultiColoredButtonContainer inst="first"/>
<MultiColoredButtonContainer inst="second"/>

If you need to redefine the original state when creating an instance, it is also very simple.

<MultiColoredButtonContainer
    inst="second"
    initState={{
        someValue: "This instance has a different value",
    }}
/>

When re-render, initState is not overwritten, so as not to break the state every time. Only for initial creation!

How to create reused reducer

// MultiColoredButtonReducer.js

import { multiInitReducer } from "redux-inst";
import { MultiColoredButtonActionTypes } from "./MultiColoredButtonActionTypes";

let initState = {
    // inst: null, - This line is required
	inst: null,
	someValue: "",
};

const MultiColoredButtonReducer = () => {
    const componentName = "multiColoredButton";
    // multiInitReducer - converts shared Actions to individual Actions for this component,
    // and adds initState.
	let { actionTypes, getState } = multiInitReducer(
		MultiColoredButtonActionTypes,
		componentName,
		initState
	);

	return [
		componentName,
		initState,
		{
			[actionTypes.ON_SOME_ACTION]: (states, action) => {
                let { inst, value } = action.payload;
                // getState - retrieves the state of all component instances
                // and returns the state only for the current instance
				let state = getState(states, inst);

                // With immer under the hood, you can interact with your data by simply changing it,
                // while still retaining all the benefits of immutable data.
				state.someValue = value;
			},
		},
	];
};

export default MultiColoredButtonReducer;

Container for a reused component

import { connect } from "react-redux";
import { mapState } from "redux-inst";
import MultiColoredButtonActions from "./MultiColoredButtonActions";
import MultiColoredButton from "./MultiColoredButton";

// states - for all instances
const mapStateToProps = (states, ownProps) => {
    // mapState - returns the state for the current instance
	let state = mapState(states, "multiColoredButton", ownProps);

	return {
		someValue: state.someValue,
	};
};

const mapDispatchToProps = (dispatch, ownProps) => {
    // Retrieves the name of the current component instance
	let { inst } = ownProps;

	return {
		onSomeEvent: value => dispatch(MultiColoredButtonActions.onSomeEvent(inst, value)),
	};
};

export default connect(mapStateToProps, mapDispatchToProps)(MultiColoredButton);

Actions for a reused component

"ActionTypes" are used inside "Actions", they are as simple as possible, and then they will be automatically converted.

// MultiColoredButtonActionTypes.js

export const MultiColoredButtonActionTypes = {
	ON_SOME_ACTION: "ON_SOME_ACTION",
};

// MultiColoredButtonActions.js

import { createActions } from "redux-inst";
import { MultiColoredButtonActionTypes } from "./MultiColoredButtonActionTypes";

// Conversion for a component instance
const actionsType = createActions(MultiColoredButtonActionTypes, "MultiColoredButton");
const MultiColoredButtonActions = {
	onSomeEvent: (inst, value) => ({
		type: actionsType.ON_SOME_ACTION,
		payload: { inst, value },
	}),
};

export default MultiColoredButtonActions;

Connecting a new component after creating it in reducer

// reducers.js

export default combineReducers({
    // Pages or something else with the usual approach
    aboutPage: AboutPageReducer,
    
    // Reused components
	components: componentsReducers([
		MultiColoredButtonReducer,
	]),
});