iceCream: A new library to handle Redux/Redux-Saga in your application.

rdhox — Tue, 09 Jul 2019 09:59:03 +0000

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

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.

DEV Community: rdhox

iceCream: A new library to handle Redux/Redux-Saga in your application.

Install package

Basic example