Niaochao NPM | npm.io

niaochao · 如鸟归巢

A fast and pure state container for React apps which is easy to use.

Installation

npm install niaochao

Dependencies

With hooks, React version needs to be 16.8.x at least.

The library itself zero dependencies for sure.

API

easy, only 3 APIs.

Use createStore to create a store.

/**
 * createStore receive the exat one parameter: initialState
 */
const initialState = { repos: [] };
const store = createStore(initialState);

Use Provider to makes the store available to the rest of your app.

/**
 * Provider receive the exat one prop: store created by createStore
 */
function App() {
    return (
        <Provider store={store}>
            <YourComponent />
        </Provider>
    );
}

Use connect to connect your component to the store.

/**
 * map state to your component
 * mapState must be a function
 * @param state {Object} the niaochao state
 * @return props {Object} the partialState your component need
 */
const mapState = (state) => ({
    opacity: state.opacity,
    repos: state.repos,
})

/**
 * map actions to your component
 * mapActions must be a object
 */
const mapActions = {
    /**
     * a action used in your component
     * @param state {Object} the niaochao state
     * @return update {Object} the niaochao partialState that need update
     */
    changeOpacity: (state) => ({ opacity: state.opacity + .1 }),
    /**
     * a async action return a promise is ok
     */
    fetchRepos: async (state) => {
        const repos = await fetch('https://api.github.com/users/veedrin/repos').then(res => res.json());
        return { repos };
    },
}

export default connect(mapState, mapActions)(Counter);

Demo

A simple Counter App build with React and niaochao.

// store.js
import { createStore } from 'niaochao';

const initialState = { count: 0 };
const store = createStore(initialState);

export default store;

// app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'niaochao';
import store from './store';
import Counter from './counter';

function App() {
    return (
        <Provider store={store}>
            <Counter />
        </Provider>
    );
}

ReactDOM.render(<App />, document.getElementById('root'));

// counter.js
import React from 'react';
import { connect } from 'niaochao';
import store from './store';

function Counter({ count, increment, decrement }) {
    return (
        <div id='counter'>
            <button onClick={decrement}>减少</button>
            <span>{count}</span>
            <button onClick={increment}>增加</button>
        </div>
    );
}

const mapState = (state) => ({
    count: state.count,
})

const mapActions = {
    increment: (state) => ({ count: state.count + 1 }),
    decrement: (state) => ({ count: state.count - 1 }),
}

export default connect(mapState, mapActions)(Counter);

SSR

Server side

import { renderToString } from 'react-dom/server';
import { createStore } from 'niaochao';
import App from 'view/counter';

const initialState = { count: 0 };
const store = createStore(initialState);
const html = renderToString(<App store={store} />);

`
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>niaochao</title>
</head>
<body>
    <div id="root">${html}</div>
    <script>window.__INITIAL_STATE__=${JSON.stringify(store.getState())}</script>
</body>
</html>
`

Client side

// store.js
import { createStore } from 'niaochao';

const store = createStore(window.__INITIAL_STATE__);

export default store;

// index.js
import React from 'react';
import { Provider } from 'niaochao';
import Counter from './counter';

function App({ store }) {
    return (
        <Provider store={store}>
            <Counter />
        </Provider>
    );
}

export default App;

// app.js
import React from 'react';
import ReactDOM from 'react-dom';
import store from './store';
import App from './index';

ReactDOM.hydrate(<App store={store} />, document.getElementById('root'));