@apparts/redux

Apparts Redux Boilerplate

Usage no npm install needed!

<script type="module">
  import appartsRedux from 'https://cdn.skypack.dev/@apparts/redux';
</script>

README

+TITLE: Redux-Boilerplate

+DATE: [2019-02-07 Thu]

+AUTHOR: Philipp Uhl

  • Usage

Install =@apparts/redux=, create a file =store.js=:

+BEGIN_SRC js

import configureStore from "@apparts/redux";

import firststore from "./firststore"; import secondstore from "./secondstore"; // ...

const { store, persistor, types } = configureStore({ firststore, secondstore });

export { persistor }; export default store;

+END_SRC

** Stores

A store must export an object with:

  • =reducer = :: A function that takes the action-types as an argument and returns the reducer.
  • =actionNames = :: An array with all names of action-types of that store.
  • =blacklisted <?boolean>= :: /Optionally/, you can specify a =blacklisted= value. If true, the store will be put in the blacklist for persisting. That means, the store will then not be persisted.

*** Filestructure

A store should be in a subdirectory of the =store.js= file. A sensible filestructure could be:

  • src
    • redux
      • store.js
      • firststore
        • index.js
      • secondstore
        • index.js
        • actions.js
        • reducer.js
    • ...rest of your project

Small stores can be put in a single =index.js= file, larger stores should be split into separate files for actions and reducers.

*** Single file store Below is an example for the =index.js= of a store:

+BEGIN_SRC js

export const setOffline = () => ({ type: "SET_NETWORK", state: false, });

export const setOnline = () => ({ type: "SET_NETWORK", state: true, });

const actionNames = [setOffline().type];

const defaultState = true; const reducer = (types) => (state = defaultState, action = {}) => { switch (action.type) { case types.SET_NETWORK.name: return action.state; default: return state; } };

export default { reducer, actionNames, blacklisted: true, };

+END_SRC

*** Multi file store

An example for the =index.js= of a store, that is split into multiple files:

+BEGIN_SRC js

import reducer from "./reducer"; import actionNames from "./actions"; export * from "./actions"; export default { reducer, actionNames, };

+END_SRC