Simple Dependancy Injection Solution for React
npm install @storybook/react-simple-diSimple dependancy injection solution for React.
```
npm i react-simple-di
In react-simple-di, we've two types of dependencies, they are:
1. context - These are usually, configurations, models and client for different remote data solutions.
2. actions - Actions are simple functions which used to perform business logic with the help of the above context.
> Every action will receive the context as it's first argument.
First, we need to inject dependencies to a root level React component. Mostly, this will be the main layout component of our app.
Here are our dependencies:
`js
const context = {
DB,
Router,
appName: 'My Blog'
};
const actions = {
posts: {
create({DB, Router}, title, content) {
const id = String(Math.random());
DB.createPost(id, title, content);
Router.go(/post/${id});`
}
}
};
First we've defined our context. Then, we have our actions. Here actions must follow a structure like mentioned above.
Let's inject our dependencies:
`js
import {injectDeps} from 'react-simple-di';
import Layout from './layout.jsx';
// Above mentioned actions and context are defined here.
const LayoutWithDeps = injectDeps(context, actions)(Layout);
`
Now you can use LayoutWithDeps anywhere in your app.
Any component rendered inside LayoutWithDeps can access both context and actions.
When using dependecies it will compose a new React component and pass dependencies via props to the original component.
First let's create our UI component. Here it will expect dependecies to come via props appName and createPost.
`js
class CreatePost extends React.Component {
render() {
const {appName} = this.props;
return (
Create a blog post on app: ${appName}.
);
}
create() {
const {createPost} = this.props;
createPost('My Blog Title', 'Some Content');
}
}
`
So, let's use dependencies:
`js
import {useDeps} from 'react-simple-di';
// Assume above mentioned CreatePost react component is
// defined here.
const depsToPropsMapper = (context, actions) => ({
appName: context.appName,
createPost: actions.posts.create
});
const CreatePostWithDeps = useDeps(depsToPropsMapper)(CreatePost);
`
That's it.
> Note: Here when calling the actions.posts.create action, you don't need to provide the context as the first argument. It'll handle by react-simple-di.
Default Mapper
If you didn't provide a mapper function, useDeps will use a default mapper function will allows you to get context and props directy. Here's that default mapper:
`js``
const mapper = (context, actions) => ({
context: () => context,
actions: () => actions
});