https://github.com/kristoferjoseph/redeux

Minimal unidirectional data flow utility library
https://github.com/kristoferjoseph/redeux

data flux reducer store unidirectional utility

Last synced: 2 months ago
JSON representation

Minimal unidirectional data flow utility library

• Host: GitHub
• URL: https://github.com/kristoferjoseph/redeux
• Owner: kristoferjoseph
• License: apache-2.0
• Created: 2016-07-18T22:36:19.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:46:37.000Z (about 2 years ago)
• Last Synced: 2024-04-13T21:57:38.557Z (9 months ago)
• Topics: data, flux, reducer, store, unidirectional, utility
• Language: JavaScript
• Homepage:
• Size: 472 KB
• Stars: 56
• Watchers: 2
• Forks: 6
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# redeux

Minimal unidirectional data flow utility library.

- Written in plain 'ol JavaScript so **no transpile needed**⚡️

- Tiny💥

    - [~1k](https://github.com/kristoferjoseph/redeux/blob/master/index.js)

- 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

[``](https://github.com/kristoferjoseph/redeux/blob/master/example.html)

##### es module

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

## Usage

#### reducer

this is what a reducer looks like

```js

// 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

```js

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

```js

var store = require('redeux')()

store.dispatch({type: 'ADD', data: '1'})

```

#### Subscribing a listener

```js

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](https://github.com/kristoferjoseph/hash-switch)_