niaochao
v3.6.1
Published
A fast and pure state container for React apps
Downloads
24
Maintainers
veedrinReadme
niaochao · 如鸟归巢
A fast and pure state container for React apps which is easy to use.
Installation
npm install niaochaoDependencies
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'));