Skip to content
🌡 Declarative API Data Management Library built on top of redux 🌡
JavaScript TypeScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
docs Rename some variables for good luck Nov 16, 2019
src Add module export for code splitting Oct 7, 2019
test Add perf tests to hook Jun 3, 2019
types Fix some types per review Nov 14, 2019
.babelrc Add module export for code splitting Oct 7, 2019
.eslintignore
.eslintrc.yml Allow prettier to prettify Markdown files Nov 5, 2019
.gitignore Add module export for code splitting Oct 7, 2019
.npmignore Add npm ignore Oct 8, 2019
.nvmrc Add type definitions for nion Nov 5, 2019
.prettierrc.js Add prettier config file Jun 14, 2018
README.md Fix non-working example in README Nov 12, 2019
license.txt Rename LICENSE.txt to license.txt Jun 25, 2018
package-lock.json Fix some types per review Nov 14, 2019
package.json Fix some types per review Nov 14, 2019

README.md

nion

nion is a library that makes it easy to fetch, update, and manage API data in a Redux store as well as bind it to React components. Nion strives to make working with data as flexible, consistent, and predictable as possible. πŸ’–

nion is heavily inspired by Apollo and GraphQL.

In a Nutshell 🌰

nion is used as a hook which is given a declaration of what data is needed by the component that calls it.

import { useNion } from '@nion/nion'

export const UserContainer = () => {
    const [currentUser, actions, request] = useNion({
        dataKey: 'currentUser',
        endpoint: 'https://patreon.com/api/current_user',
    })

    const loadButton = <Button onClick={() => actions.get()}>Load</Button>

    return (
        <Card>
            {request.isLoading ? <LoadingSpinner /> : loadButton}
            {currentUser && <UserCard user={currentUser} />}
        </Card>
    )
}

We simply pass in a declaration object that tells nion what to fetch, and nion automatically handles fetching the data and returning it along with the corresponding request status.

nion can also be used as a decorator function which declares what data will be managed by the decorated component and passes in props for managing that data. This is a deprecated usage; we don't recommend writing new code that uses the decorator form.

See also:

Up and Running πŸƒπŸΎβ€β™€οΈ

Installation

nion requires redux-thunk in order to handle its async actions, so you should install that along with the nion package.

npm install nion redux-thunk --save

Also, nion is best used as a decorator function, so you might also want to make sure you've got babel configured to handle decorator transpilation:

npm install babel-plugin-transform-decorators-legacy --save-dev

Configuration

Finally, nion has to be wired up to the redux store and optionally configured. Here's a very simple setup:

import { applyMiddleware, createStore, combineReducers } from 'redux'
import thunkMiddleware from 'redux-thunk'

import { configureNion } from 'nion'

export default function configureStore() {
    const configurationOptions = {}
    const { reducer: nionReducer } = configureNion(configurationOptions)

    const reducers = combineReducers({
        nion: nionReducer,
    })

    let store = createStore(reducers, applyMiddleware(thunkMiddleware))

    return store
}

Read more about configuring nion in the docs.

Read More πŸ“š

Licensing 🍴

MIT

You can’t perform that action at this time.