forked from reduxjs/redux
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request reduxjs#1269 from rackt/tree-view-example
Add tree view example
- Loading branch information
Showing
13 changed files
with
335 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
{ | ||
"stage": 2, | ||
"env": { | ||
"development": { | ||
"plugins": [ | ||
"react-transform" | ||
], | ||
"extra": { | ||
"react-transform": { | ||
"transforms": [{ | ||
"transform": "react-transform-hmr", | ||
"imports": ["react"], | ||
"locals": ["module"] | ||
}] | ||
} | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
export const INCREMENT = 'INCREMENT' | ||
export const CREATE_NODE = 'CREATE_NODE' | ||
export const ADD_CHILD = 'ADD_CHILD' | ||
|
||
export function increment(nodeId) { | ||
return { | ||
type: INCREMENT, | ||
nodeId | ||
} | ||
} | ||
|
||
let nextId = 0 | ||
export function createNode() { | ||
return { | ||
type: CREATE_NODE, | ||
nodeId: `new_${nextId++}` | ||
} | ||
} | ||
|
||
export function addChild(nodeId, childId) { | ||
return { | ||
type: ADD_CHILD, | ||
nodeId, | ||
childId | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import React from 'react' | ||
import { Component } from 'react' | ||
import { connect } from 'react-redux' | ||
import * as actions from '../actions' | ||
|
||
class Node extends Component { | ||
constructor(props) { | ||
super(props) | ||
this.handleIncrementClick = this.handleIncrementClick.bind(this) | ||
this.handleAddChildClick = this.handleAddChildClick.bind(this) | ||
} | ||
|
||
handleIncrementClick() { | ||
const { increment, id } = this.props | ||
increment(id) | ||
} | ||
|
||
handleAddChildClick(e) { | ||
e.preventDefault() | ||
|
||
const { addChild, createNode, id } = this.props | ||
const childId = createNode().nodeId | ||
addChild(id, childId) | ||
} | ||
|
||
renderChild(childId) { | ||
return ( | ||
<li key={childId}> | ||
<ConnectedNode id={childId} /> | ||
</li> | ||
) | ||
} | ||
|
||
render() { | ||
const { counter, childIds } = this.props | ||
return ( | ||
<div> | ||
Counter: {counter} | ||
{' '} | ||
<button onClick={this.handleIncrementClick}> | ||
+ | ||
</button> | ||
<ul> | ||
{childIds.map(this.renderChild)} | ||
<li key='add'> | ||
<a href='#' onClick={this.handleAddChildClick}> | ||
Add child | ||
</a> | ||
</li> | ||
</ul> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
function mapStateToProps(state, ownProps) { | ||
return state[ownProps.id] | ||
} | ||
|
||
const ConnectedNode = connect(mapStateToProps, actions)(Node) | ||
export default ConnectedNode |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
export default function generateTree() { | ||
let tree = { | ||
0: { | ||
id: 0, | ||
counter: 0, | ||
childIds: [] | ||
} | ||
} | ||
|
||
for (let i = 1; i < 1000; i++) { | ||
let parentId = Math.floor(Math.pow(Math.random(), 2) * i) | ||
tree[i] = { | ||
id: i, | ||
counter: 0, | ||
childIds: [] | ||
} | ||
tree[parentId].childIds.push(i) | ||
} | ||
|
||
return tree | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<title>Redux tree-view example</title> | ||
</head> | ||
<body> | ||
<div id="root"> | ||
</div> | ||
<script src="/static/bundle.js"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import React from 'react' | ||
import { render } from 'react-dom' | ||
import { Provider } from 'react-redux' | ||
import Node from './containers/Node' | ||
import configureStore from './store/configureStore' | ||
import generateTree from './generateTree' | ||
|
||
const tree = generateTree() | ||
const store = configureStore(tree) | ||
|
||
render( | ||
<Provider store={store}> | ||
<Node id={0} /> | ||
</Provider>, | ||
document.getElementById('root') | ||
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
{ | ||
"name": "redux-tree-view-example", | ||
"version": "0.0.0", | ||
"description": "Redux tree-view example", | ||
"scripts": { | ||
"start": "node server.js" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/rackt/redux.git" | ||
}, | ||
"license": "MIT", | ||
"bugs": { | ||
"url": "https://github.com/rackt/redux/issues" | ||
}, | ||
"homepage": "https://rackt.github.io/redux", | ||
"dependencies": { | ||
"react": "^0.14.6", | ||
"react-dom": "^0.14.6", | ||
"react-redux": "^4.0.6", | ||
"redux": "^3.0.6" | ||
}, | ||
"devDependencies": { | ||
"babel-core": "^5.6.18", | ||
"babel-loader": "^5.1.4", | ||
"babel-plugin-react-transform": "^1.1.0", | ||
"expect": "^1.6.0", | ||
"express": "^4.13.3", | ||
"jsdom": "^5.6.1", | ||
"mocha": "^2.2.5", | ||
"node-libs-browser": "^0.5.2", | ||
"react-transform-hmr": "^1.0.0", | ||
"webpack": "^1.9.11", | ||
"webpack-dev-middleware": "^1.2.0", | ||
"webpack-hot-middleware": "^2.2.0" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
import { INCREMENT, ADD_CHILD, CREATE_NODE } from '../actions' | ||
|
||
function node(state, action) { | ||
switch (action.type) { | ||
case CREATE_NODE: | ||
return { | ||
id: action.nodeId, | ||
counter: 0, | ||
childIds: [] | ||
} | ||
case INCREMENT: | ||
return Object.assign({}, state, { | ||
counter: state.counter + 1 | ||
}) | ||
case ADD_CHILD: | ||
return Object.assign({}, state, { | ||
childIds: [ ...state.childIds, action.childId ] | ||
}) | ||
default: | ||
return state | ||
} | ||
} | ||
|
||
export default function (state = {}, action) { | ||
const { nodeId } = action | ||
if (typeof nodeId === 'undefined') { | ||
return state | ||
} | ||
|
||
return Object.assign({}, state, { | ||
[nodeId]: node(state[nodeId], action) | ||
}) | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
var webpack = require('webpack') | ||
var webpackDevMiddleware = require('webpack-dev-middleware') | ||
var webpackHotMiddleware = require('webpack-hot-middleware') | ||
var config = require('./webpack.config') | ||
|
||
var app = new (require('express'))() | ||
var port = 3000 | ||
|
||
var compiler = webpack(config) | ||
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) | ||
app.use(webpackHotMiddleware(compiler)) | ||
|
||
app.get("/", function(req, res) { | ||
res.sendFile(__dirname + '/index.html') | ||
}) | ||
|
||
app.listen(port, function(error) { | ||
if (error) { | ||
console.error(error) | ||
} else { | ||
console.info("==> 🌎 Listening on port %s. Open up https://localhost:%s/ in your browser.", port, port) | ||
} | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { createStore } from 'redux' | ||
import reducer from '../reducers' | ||
|
||
export default function configureStore(initialState) { | ||
const store = createStore(reducer, initialState) | ||
|
||
if (module.hot) { | ||
// Enable Webpack hot module replacement for reducers | ||
module.hot.accept('../reducers', () => { | ||
const nextReducer = require('../reducers') | ||
store.replaceReducer(nextReducer) | ||
}) | ||
} | ||
|
||
return store | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,47 @@ | ||
var path = require('path') | ||
var webpack = require('webpack') | ||
|
||
module.exports = { | ||
devtool: 'cheap-module-eval-source-map', | ||
entry: [ | ||
'webpack-hot-middleware/client', | ||
'./index' | ||
], | ||
output: { | ||
path: path.join(__dirname, 'dist'), | ||
filename: 'bundle.js', | ||
publicPath: '/static/' | ||
}, | ||
plugins: [ | ||
new webpack.optimize.OccurenceOrderPlugin(), | ||
new webpack.HotModuleReplacementPlugin(), | ||
new webpack.NoErrorsPlugin() | ||
], | ||
module: { | ||
loaders: [ | ||
{ | ||
test: /\.js$/, | ||
loaders: [ 'babel' ], | ||
exclude: /node_modules/, | ||
include: __dirname | ||
} | ||
] | ||
} | ||
} | ||
|
||
|
||
// When inside Redux repo, prefer src to compiled version. | ||
// You can safely delete these lines in your project. | ||
var reduxSrc = path.join(__dirname, '..', '..', 'src') | ||
var reduxNodeModules = path.join(__dirname, '..', '..', 'node_modules') | ||
var fs = require('fs') | ||
if (fs.existsSync(reduxSrc) && fs.existsSync(reduxNodeModules)) { | ||
// Resolve Redux to source | ||
module.exports.resolve = { alias: { 'redux': reduxSrc } } | ||
// Compile Redux from source | ||
module.exports.module.loaders.push({ | ||
test: /\.js$/, | ||
loaders: [ 'babel' ], | ||
include: reduxSrc | ||
}) | ||
} |