https://github.com/zmitry/rrethunk

simplify your redux boilerplate
https://github.com/zmitry/rrethunk

react redux redux-thunk

Last synced: 17 days ago
JSON representation

simplify your redux boilerplate

• Host: GitHub
• URL: https://github.com/zmitry/rrethunk
• Owner: zmitry
• Created: 2017-09-13T16:01:01.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-04-26T11:01:31.000Z (over 6 years ago)
• Last Synced: 2024-12-30T15:49:18.644Z (21 days ago)
• Topics: react, redux, redux-thunk
• Language: JavaScript
• Homepage: https://zhdmitry.github.io/rrethunk
• Size: 1.95 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


## rrethunk

[![NPM Downloads](https://img.shields.io/npm/dm/rrethunk.svg?style=flat)](https://www.npmjs.com/package/rrethunk)

helpers for redux which reduces boilerplate code

## Actions

```js

// actions

const clear = (args)=>{

    return fetch('api')

}

// it will resolve this promise

// and trigger fetchData:busy while primise is loading

// and fetchData:success when promise is resolved

const fetchData = (args) => (dispatch, getState)=>{

    return fetch('api')

}

export const actions = createActions({

    fetchData,

    clear

}, {

    prefix: '@data/',

    meta: (args)=> ({ entity: args.entity })

})

dispatch(actions.fetchData({ entity: 'todo', info: 'bla lba' })) 

/**

 *  => {type: '@data/fetchData:loading', payload: { entity: 'todo',  info: 'bla lba' }', meta: { entity: 'todo' } }

 *  => {type: '@data/fetchData:success', payload:  {//thunk result}, meta: { entity: 'todo' } }

 *  or  => {type: '@data/fetchData:error', payload: {//error result}, meta: { entity: 'todo' } }

 *  or  => {type: '@data/fetchData:canceled', payload: null, meta: { entity: 'todo' } }

 * 

 */

actions.fetchData.error('something happened') => ({  }) // => {type: '@data/fetchData:error', payload: 'something happened' }

actions.fetchData.error('something happened', { user: 21 }) => ({  }) // => {type: '@data/fetchData:error', payload: 'something happened', meta: { user: 21 } }

// reducer

import actions from './actions'

const reducer = createReducer({})

.before(actions.fetchData, (state)=> ({ loading: true }))

.canceled(actions.fetchData, (state)=> ({}))

.on(actions.fetchData, (state, payload)=>{

    return payload.data

})

.onError(actions.fetchData, (state)=> ({}))

```

## custom combineReducer

```js

const reducer = combineReducer({

    a: s=>s,

    b: s=>s

}).on(actions.done, (state, action)=>({

// state is {a, b}; 

return { a: state.a }

}))

```

also there is actionState reducer which store state of each action

# how to use

1. add redux-thunk middleware

2. just use it as plain actions

# TODO

this lib tries to implement common use cases such as 

1. Handling async actions state with constants boilerplate 

2. Handling async actions creation with prefixing and auto meta info

3. Handling actions canceling, takeLatest, takeFirst

4. Make reducer more easier to write and enforce you for writing more atomic reducers.

5. Handling actions transactions and reverting

## to read

the idea of decoupling async actions and api repository 

https://medium.com/@david.losert_73564/dependency-inversion-with-redux-thunk-typescript-e09cebabdc1f