68
rated 0 times
[
69]
[
1]
/ answers: 1 / hits: 26217
/ 8 Years ago, fri, june 24, 2016, 12:00:00
I want my app component has a default props , and use that props in mapStateToProps.
containers/App.js
import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Footer from '../components/Footer';
import TreeNode from '../containers/TreeNode';
import Home from '../containers/Home';
import * as NodeActions from '../actions/NodeActions'
export default class App extends Component {
constructor(props, context) {
super(props, context)
this.props = {
info:{
path:'/'
}
}
}
componentWillMount() {
// this will update the nodes on state
this.props.actions.openNode('/');
}
render() {
const { node , actions} = this.props
console.log(this.props)
return (
<div className="main-app-container">
<Home />
<div className="main-app-nav">Simple Redux Boilerplate</div>
{node.childNodes &&
<div>{node.childNodes.map(node => <TreeNode key={info.path} info={node} tree={tree} actions={actions} />)}</div>
}
{!node.childNodes &&
<div>no children</div>
}
{/*<Footer />*/}
</div>
);
}
}
App.defaultProps = {
info:{
path:'/'
}
};
function mapStateToProps(state, ownProps) {
console.log('state')
console.log(state)
console.log('ownProps')
console.log(ownProps)
return {
node: ownProps.info.path? state.TreeNodeReducer.tree[ownProps.info.path] : {}
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(NodeActions, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
reducers/TreeNodeReducer.js
import { OPEN_NODE, CLOSE_NODE, GET_NODES } from '../constants/NodeActionTypes';
import UUID from "node-uuid"
const initialState = {
open: false,
info: {}
}
class NodeModel {
constructor(path, type, right) {
this.name = path;
this.path = path;
this.type = type;
this.right = right;
}
}
let lastId = 0;
function getFileList() {
var testNodes = []
for (var i=0; i< 3; i++) {
testNodes.push(new NodeModel(lastId,'d', i.toString()))
lastId++;
}
return testNodes
}
const getNodes = (state, action) => {
var { path } = action
var tree = state.tree ? state.tree : {}
tree[path] = getFileList(path)
return {
...state,
tree:tree
};
};
export default function (state = initialState, action) {
switch (action.type) {
case OPEN_NODE:
return { ...getNodes(state, action), open:true };
case GET_NODES:
return getNodes(state, action);
case CLOSE_NODE:
return {
...state,
open:false
};
default:
return state;
}
}
I have tried :
1: constructor
constructor(props, context) {
super(props, context)
this.props = {
info:{
path:'/'
}
}
}
2: defaultProps:
App.defaultProps = {
info:{
path:'/'
}
};
but none of them work...
log always is:
state has the correct default value, but ownProps is empty...
PS:Project is here .
More From » reactjs
