提交 e67d17ef 编写于 作者: Y yuyaohshimo 提交者: Tim Neutkens

Add kea example (#3262)

上级 d72d3c09
{
"presets": [
"next/babel"
],
"plugins": [
"transform-decorators-legacy"
]
}
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-kea)
# kea example
## How to use
Download the example [or clone the repo](https://github.com/zeit/next.js):
```bash
curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-kea
cd with-kea
```
Install it and run:
```bash
npm install
npm run dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
```bash
now
```
{
"name": "with-kea",
"version": "1.0.0",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"kea": "^0.27.3",
"next": "^4.1.4",
"next-redux-wrapper": "^1.3.4",
"prop-types": "^15.6.0",
"react": "^16.1.0",
"react-dom": "^16.1.0",
"react-redux": "^5.0.6",
"redux": "^3.7.2",
"reselect": "^3.0.1"
},
"license": "ISC",
"devDependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.4"
}
}
import React from 'react'
import { initStore } from '../store'
import withRedux from 'next-redux-wrapper'
import PropTypes from 'prop-types'
import { kea } from 'kea'
@kea({
path: () => ['kea'],
actions: () => ({
increment: amount => ({ amount }),
decrement: amount => ({ amount })
}),
reducers: ({ actions }) => ({
counter: [
0,
PropTypes.number,
{
[actions.increment]: (state, payload) => state + payload.amount,
[actions.decrement]: (state, payload) => state - payload.amount
}
]
}),
selectors: ({ selectors }) => ({
doubleCounter: [
() => [selectors.counter],
counter => counter * 2,
PropTypes.number
]
})
})
class App extends React.Component {
render () {
return (
<div>
<p>Double Counter: {this.props.doubleCounter}</p>
<button type='button' onClick={() => this.actions.increment(1)}>Increment</button>
<button type='button' onClick={() => this.actions.decrement(1)}>Decrement</button>
</div>
)
}
}
export default withRedux(initStore)(App)
import { keaReducer } from 'kea'
import { createStore, compose, combineReducers } from 'redux'
const reducers = combineReducers({
kea: keaReducer('kea')
})
const reduxDevTools =
typeof window !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION__
? window.__REDUX_DEVTOOLS_EXTENSION__()
: f => f
export const initStore = () => {
return createStore(
reducers,
compose(reduxDevTools)
)
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册