Question

我正在建立一个基于react redux的文件管理器webui（我的目的是通过这个项目掌握react和redux）

如您所知，文件管理器需要一个树资源管理器。我想构建一个可以自包含它的组件，每个组件都有自身状态。如下所示：

TreeNode也可以包含TreeNode的子项。每个TreeNode保持其状态{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.open设置为{{ 1}}。（注意：true尚未实现，现在只提供假数据）屏幕截图：

点击每个元素，但getFileList fucntion。

我的代码：

容器/ App.js

states are equal

容器/ TreeNode.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);

动作/ NodeActions.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
}

减速器/ TreeNodeReducer.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
  };
}

有关完整代码，请参阅我的github https://github.com/eromoe/simple-redux-boilerplate

我没有看到这样的组件的示例封面，谷歌搜索结果没有任何帮助。有没有想过要克服这个？

更新：我看到了How to manage state in a tree component in reactjs

但解决方案是将整个树传递到状态，不能在文件管理器中使用。

Answer 1

我正在使用React和Redux实现类似Github的应用程序。

现在，我只列出存储库并显示其文件以及浏览它们。

我不知道这是不是一种好的或坏的做法，但这就是我实现我的树组件的方式。

在每个树组件中，我有一个自己的链接。我在路线上传递了一些数据，所以当我渲染它时我能够得到下一棵树。

<强>组件

class Tree extends Component {
  constructor(props) {
    super(props);

    this.renderList = this.renderList.bind(this);
  }

  componentWillMount() {
    this.props.getTree(this.props.params.sha);
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.params.sha !== this.props.params.sha) {
      this.props.getTree(nextProps.params.sha);
    }
  }

  renderList(file) {
    return (
      <tr key={ file.sha }>
        { file.type == 'tree'
       ? <td><Link to={`/repository/${this.props.params.repoName}/tree/${file.path}/${file.sha}`}>{ file.path }</Link></td>
       : <td><Link to={`/repository/${this.props.params.repoName}/blob/${file.sha}/${file.path}`}>{ file.path }</Link></td>}
      </tr>
    )
  }

  render() {
    const treeFile = this.props.tree;
    const fileName = this.props.params.path;

    return (
      <div className="row">
        <h3>{ fileName }</h3>
        <div className="col-md-12">
          <table className="table table-hover table-bordered">
            <tbody>
              { isEmpty(treeFile.tree) ? <tr>Loading</tr> : treeFile.tree.map(this.renderList) }
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}
export default Tree;

<强>动作

const setTree = (tree) => {
  return {
    type: actionTypes.GET_TREE,
    tree
  };
};

export const getTree = (sha) => {

  return (dispatch, getState) => {
    const { repository, profile } = getState();
    const repo = GitHubApi.getRepo(profile.login, repository.name);

    repo.getTree(sha, function(err, data) {
      dispatch(setTree(data));
    });
  }
}

<强>减速

const initialState = "";

export const tree = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.GET_TREE:
      return getTree(state, action);
  }
  return state;
}

const getTree = (state, action) => {
  const { tree } = action;
  return tree;
}

对于完整的代码，您可以在github上查看我的存储库

https://github.com/glundgren93/Github-redux

Answer 2

所有TreeNode都与redux具有相同的状态，因为所有mapStateToProps都相同。

mapStateToProps可以将ownProps（包装组件的props作为第二个参数。您可以使用它来区分TreeNodes。在您的情况下，path是一个不错的选择。

考虑编写一个像getChildrenNodes(state, path)这样的状态选择器并相应地返回节点。

您可能需要先考虑阅读redux文档，特别是这个版本：http://redux.js.org/docs/recipes/ComputingDerivedData.html

如何在react redux中实现自包含组件？

2 个答案: