Skip to content

kristoferjoseph/redeux

Folders and files

NameName
Last commit message
Last commit date
Nov 19, 2019
Nov 19, 2019
Jul 18, 2016
Jul 6, 2018
Feb 12, 2018
Apr 12, 2018
Nov 19, 2019
Nov 19, 2019
Jul 6, 2018
Jul 6, 2018
Apr 12, 2018

Repository files navigation

redeux

Minimal unidirectional data flow utility library.

  • Written in plain 'ol JavaScript so no transpile needed⚡️
  • Tiny💥
  • Simple api:
    • store
      • returns the current state
        • store.register
          • register any number of reducers
        • store.subscribe
          • subscribe a function to receive state updates
        • store.unsubscribe
          • unsubscribe a function from state updates
        • store.dispatch
          • dispatch an action

Install

node

npm i redeux --save

script

<script src="redeux.umd.js"></script>

es module

import Redeux from 'https://unpkg.com/redeux?module'

Usage

reducer

this is what a reducer looks like

// Default state
var initialState = []

// By defualt the reducer function's name property
//  will be used as the key for the data atom
//  NOTE: You can also add the `key` property to your reducer function
//  i.e.: `todos.key = todos` useful for when you want to use uglify and mangle is changing function names.
module.exports = function todos (state, action) {
  // Guard against undefined action
  action = action || {}

  // You can use whatever keys you like in your actions,
  //  but i find a type and data works best for me
  var type = action.type
  var data = action.data

  // Guard against undefined state
  //  by initializing with initial state
  state = state || initialState

  switch (type) {
    case 'ADD':
      return add(state, data)
      break;
    default:
      return state;
  }
}

// The add function will get passed the current state and the action data
function add (state, data) {
  // Make a copy of the array
  var newState = state.concat()

  // Change the copy
  newState.push(data)

  // Return the changed copy
  return newState
}

console.log(store()) // { todos: [] }

Registering a reducer

var todos = require('./reducers/todos')
var initialState = {todos: [1,2,3]}
var store = require('redeux')(initialState)
// You can pass as many reducers as you want to register
store.register(todos)

Dispatching an action

var store = require('redeux')()
store.dispatch({type: 'ADD', data: '1'})

Subscribing a listener

var initialState = {todos: [0]}
var store = require('redeux')(initialState)
var todos = require('./reducers/todos')
store.register(todos)
store.subscribe(update)
store.dispatch({type:'ADD', data: 1})
store.unsubscribe(update)

function update(state, action) {
  console.log(state) // {todos[0, 1]}
}

btw redeux works really well with hash-switch