ICECREAM: новая библиотека для обработки Redux/Redux-Saga в вашем приложении.

Я наконец-то получил время, чтобы открыть свой личный способ использования Redux и Redux-Saga. Вдохновленная моделями DVA, библиотека помогает вам организовать ваш код и сделать как можно проще использовать Redux и Redux-Saga. Вы можете найти все, что вам нужно знать об этом здесь:

https://icecreamjs.netlify.com/

Библиотека только что была выпущена, не стесняйтесь прислать мне свои отзывы и попытаться сделать новые функции доступными!

Установите пакет

Используйте свой любимый менеджер пакетов:

yarn add icecream-please

или

npm i --save icecream-please

Основной пример

Давайте начнем с написания модели. Модель – это классический объект JavaScript Ключ: значение Это будет содержать всю необходимую логику для части вашего приложения для работы. Вы можете иметь только одну модель для всего вашего приложения, но обычно полезно организовать ваше приложение, разделяя его на разные части.

Давайте создадим модель для обработки основного счетчика:

// 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 работает с Redux и Redux-Saga, вот и все. Это означает, что Вы можете использовать его с любыми библиотеками JavaScript и Frameworks . Мы используем React здесь:

// 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 = () => (
  
    
  
);

ReactDOM.render(, document.getElementById("root"));

Вот код файла app.js:

// App.js
import React from "react";
import { connect } from "react-redux";

const App = props => {
  const {
    counter: { number },
    dispatch
  } = props;

  return (
    
      Use the counter:
      {number}
      
        
        
        
      
    
  );
};

export default connect(({ counter }) => ({ counter }))(App);

И вуаля! Вы можете найти этот пример Здесь и менее базовый Здесь Анкет

Оригинал: “https://dev.to/rdhox/icecream-a-new-library-to-handle-redux-redux-saga-in-your-application-4ipb”

Установите пакет

Основной пример

Use the counter:

{number}

Читайте ещё по теме: