I finally got the time to open-source my personal way of using redux and redux-saga.
Inspired by DVA's models, the library help you to organize your code and to make the use of redux and redux-saga as easy as possible.
You can find everything you need to know about it here:
https://icecreamjs.netlify.com/
The library just got released, don't hesitate to send me your feedback and try to make new features available!
Install package
Use your favorite package manager:
yarn add icecream-please
or
npm i --save icecream-please
Basic example
Let's start by writing a model.
A model is a classic JavaScript object key:value that will contain all the necessary logic for a part of your application to work.
You can have only one model for your entire application, but it is usually useful to organize your application by splitting it in different parts.
Let's create a model to handle a basic counter:
// counterModel.js
export default {
modelname: "counter",
state: {
number: 0
},
reducers: {
add(state) {
return {
...state,
number: state.number + 1
};
},
sub(state) {
return {
...state,
number: state.number - 1
};
},
reset(state) {
return {
...state,
number: 0
};
}
},
effects: {},
listeners: {}
};
IceCream is working with redux and redux-saga, that's all. It means that you can use it with any kind of JavaScript libraries and frameworks. We use React here:
// index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import iceCreamPlease from "icecream-please";
import counterModel from "./counterModel";
import App from "./components/App";
const store = iceCreamPlease({ models: [counterModel] });
const Container = () => (
<Provider store={store}>
<App />
</Provider>
);
ReactDOM.render(<Container />, document.getElementById("root"));
Here is the code of the App.js file:
// App.js
import React from "react";
import { connect } from "react-redux";
const App = props => {
const {
counter: { number },
dispatch
} = props;
return (
<div style={{ textAlign: "center" }}>
<h2>Use the counter:</h2>
<h2>{number}</h2>
<div>
<button
onClick={() => {
dispatch({ type: "counter/sub" });
}}
>
SUB
</button>
<button
onClick={() => {
dispatch({ type: "counter/reset" });
}}
>
RESET
</button>
<button
onClick={() => {
dispatch({ type: "counter/add" });
}}
>
ADD
</button>
</div>
</div>
);
};
export default connect(({ counter }) => ({ counter }))(App);
And Voilà! You can find this example here and a less basic here.
Top comments (0)