aria-fritta-native-plugins-reducers

Plugin Reducers for aria fritta native

Usage no npm install needed!

<script type="module">
  import ariaFrittaNativePluginsReducers from 'https://cdn.skypack.dev/aria-fritta-native-plugins-reducers';
</script>

README

aria-fritta-native-plugins-reducers

install

  • create routes.js file into plugin/ folder in aria-fritta-native, example:
export default [
  {
    id: "example",
    url: "url",
    method: "put",
    queryParams: ["varQuery1"],
    bodyParams: ["varBody1", "varBody2"],
    restParams: [
      { type: "constant", value: "id" },
      { type: "parameter", value: "user_id" },
      { type: "constant", value: "range" },
      { type: "parameter", value: "range_value" }
    ], // rest params verrano fuori cosi: /id/{user_id}/range/{range_value}
    showLog: true,
    tokenRequired: true
  }

  /*
    example


    {
        id: 'example',
        url: `${config.server.http.url}`,
        method: 'put',
        queryParams: ['km'],
        bodyParams: ['id', 'name'],
        restParams: [
          { type: 'constant', value: 'user' },
          { type: 'parameter', value: 'user_id' },
          { type: 'constant', value: 'award' },
          { type: 'parameter', value: 'award_id' }
        ],
        showLog: true,
        tokenRequired: true
    }
    */
];
  • import this plugin in aria-fritta-native
  • add the following code into plugin/index.js in aria-fritta-native
import reducers from "aria-fritta-native-plugins-reducers";
  • add into export object: reducers
    for example:
export { reducers, ... };
  • add into export default object: reducers
    for example:
export default Object.values({
  reducers,
  ...
});

Note

tutto le cose che sono sotto <# #> devi metterci un valore

Redux

esempio del reducers menu che c'รจ di base configurato

...

import { actions, mapSelectorToProps } from 'reducers';

...

render() {
  const { menuOpened } = this.props;
  const { store } = this.context;


  return (
    <div>
      <Drawer
        open={menuOpened}
        onClose={() => {
          store.dispatch(actions.hideMenu());
        }}
      >
        ...
      </Drawer>
    </div>
  );
}

...

export default mapSelectorToProps(<#NomeComponente#>, ['menuOpened']);

Redux Saga

Imposta la chiamata

andare dentro src/reducers/http-request/constants.js:

  • aggiungere dentro actionsData un altro oggetto con le caratteristiche della chiamata:
{
    id: 'example',
    url: 'url',
    method: 'put',
    queryParams: ['varQuery1'],
    bodyParams: ['varBody1', 'varBody2'],
    restParams: [
        { type: 'constant', value: 'id' },
        { type: 'parameter', value: 'user_id' },
        { type: 'constant', value: 'range' },
        { type: 'parameter', value: 'range_value' }
    ],  // rest params verrano fuori cosi: /id/{user_id}/range/{range_value}
    showLog: true,
    tokenRequired: true
}

Adesso vai nel componente in cui devi implementare la chiamata e importa questi seguenti file:

import { mapHttpToProps, actions } from "reducers";

e alla fine del file aggiungere questi seguenti cose:

export default mapHttpToProps(<#NomeComponente#>, [ '<#id che hai messo nell'elemento dentro l'array manageHttpReducer nella classe constant#>' ]);

Esegui la chiamta

vai nel pezzo di codice dove vuoi eseguire la chiamata:

const { store } = this.context;
store.dispatch(actions.<#id che hai messo nell'elemento dentro l'array manageHttpReducer nella classe constant#>({
    // inserisci i params che avevi messo nella costants, nell'esempio che ti ho fatto sono:
    varQuery1: "value 1",
    varBody1: "value 2",
    varBody2: "value 3",
    user_id: 102,
    range_value: "0-10"
}, {
    then: (result) => {
        // viene richiamta questa callback quando finisce di eseguire la chiamata, puoi anche non mettercela
    },
    catch: (error) => {
        // viene richiamta questa callback se la chiamata va in errore, puoi anche non mettercela
    }
}));

Access to RefComponent

this._ref.getWrappedInstance().someFunction();

with Mobx and Reducer

this._ref.getWrappedInstance().wrappedInstance.someFunction();