ご存知のように、私は、（私の目的は反応し、このプロジェクトを通じてReduxの習得することである）ファイルマネージャをreactxで自己完結型コンポーネントを実装する方法は？
をReduxのを反応させる上でのファイルマネージャWebUIの基盤を構築していますが、ツリーexplorer.Iが可能なコンポーネントを構築したい必要があります自己を含み、それぞれ自己の状態を持つ。以下のように：
TreeNodeがtoo.Each TreeNodeTreeNodeている子どもたちは、その状態{path, children_nodes, right .....}、children_nodesがサーバから取得され保持含めることができ、pathは親によって渡されます。それが私の想像です。 構造体のような：
App:
TreeNode
--TreeNode
----TreeNode
----TreeNode
TreeNode
TreeNode
--TreeNode
TreeNode
--TreeNode
----TreeNode
----TreeNode
しかし、トラブルここに来て、ツリーのルートにReduxのconnect店ので、ルートの下にあるすべてのノードが同じ状態を受け取る...
たとえば、私がOPEN_NODEを持っていますgetFileList fucntionベースこのノードのパスを誘発し、このノードのstate.opentrueに設定するための設計であるアクション、。（注：getFileList fucntionちょうど今の偽のデータを与え、まだ実装していない） スクリーンショット： 
各要素をクリックします（ただし、states are equal）。
マイコード：
コンテナ/ 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 {
componentWillMount() {
// this will update the nodes on state
this.props.actions.getNodes();
}
render() {
const { nodes } = this.props
console.log(nodes)
return (
<div className="main-app-container">
<Home />
<div className="main-app-nav">Simple Redux Boilerplate</div>
<div>
{nodes.map(node =>
<TreeNode key={node.name} info={node} actions={this.props.actions}/>
)}
</div>
{/*<Footer />*/}
</div>
);
}
}
function mapStateToProps(state) {
return {
nodes: state.opener.nodes,
open: state.opener.open
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(NodeActions, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
コンテナ/ TreeNode.js
import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import classNames from 'classnames/bind'
import * as NodeActions from '../actions/NodeActions'
export default class TreeNode extends Component {
constructor(props, context) {
super(props, context)
this.props = {
open: false,
nodes: [],
info:{}
}
}
handleClick() {
let {open} = this.props
if (open) {
this.props.actions.closeNode()
} else {
this.props.actions.openNode()
}
}
render() {
const { actions, nodes, info } = this.props
return (
<div className={classNames('tree-node', { 'open':this.props.open})} onClick={() => {this.handleClick()} }>
<a>{info.name}</a>
{nodes &&
<div>{nodes.map(node => <TreeNode info={node} />)}</div>
}
{!nodes &&
<div>no children</div>
}
</div>
);
}
}
TreeNode.propTypes = {
open:PropTypes.bool,
info:PropTypes.object.isRequired,
nodes:PropTypes.array,
actions: PropTypes.object.isRequired
}
アクション/ NodeActions.js
import { OPEN_NODE, CLOSE_NODE, GET_NODES } from '../constants/NodeActionTypes';
export function openNode() {
return {
type: OPEN_NODE
};
}
export function closeNode() {
return {
type: CLOSE_NODE
};
}
export function getNodes() {
return {
type: GET_NODES
};
}
リデューサー/ TreeNodeReducer .js
import { OPEN_NODE, CLOSE_NODE, GET_NODES } from '../constants/NodeActionTypes';
const initialState = {
open: false,
nodes: [],
info: {}
}
const testNodes = [
{name:'t1',type:'t1'},
{name:'t2',type:'t2'},
{name:'t3',type:'t3'},
]
function getFileList() {
return {
nodes: testNodes
}
}
export default function opener(state = initialState, action) {
switch (action.type) {
case OPEN_NODE:
var {nodes} = getFileList()
return {
...state,
open:true,
nodes:nodes
};
case CLOSE_NODE:
return {
...state,
open:false
};
case GET_NODES:
var {nodes} = getFileList()
return {
...state,
nodes:nodes
};
default:
return state;
}
}
は完全なコードについては、私は例のカバーなどのコンポーネントが表示されていない私のgithubのhttps://github.com/eromoe/simple-redux-boilerplate
見て、Googleの結果は何も役に立ちます。 これを克服する考えですか？
更新： 私はこのHow to manage state in a tree component in reactjs
を参照してくださいしかし、解決策は、ファイルマネージャで使用できない、状態にツリー全体を渡すことです。
ルック（http://redux.js.org/docs/recipes/ComputingDerivedData.html）でRedux。 –