javascript - 在 `state.tree` 中写入 `state.xxxReducer.tree` 而不是 `mapStateToProps` (react redux)

Question

我必须像下面这样写 mapStateToProps

function mapStateToProps(state, ownProps) {
  return {
    node: ownProps.info? state.TreeNodeReducer.tree[ownProps.info.path] : {}
  };
}

联合 reducer :

import { combineReducers } from 'redux';
import TreeNodeReducer from './TreeNodeReducer'

const rootReducer = combineReducers({
  TreeNodeReducer
});

export default rootReducer;

reducers/TreeNodeReducer.js

import { OPEN_NODE, CLOSE_NODE, GET_NODES } from '../constants/NodeActionTypes';

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;
  }
}

因为 state.TreeNodeReducer.tree 是一个全局状态，它包含所有节点信息，我想直接通过状态访问它。reducer 返回的状态将被 reducer 的名称包裹，这是对于简单的项目不方便。 Office doc不提供方法。有什么想法吗？

PS:我不得不说我想继续使用combineReducers，我看到有些项目没有使用它，直接将reducer传递给store可以达到我的目的但不好。

Answer 1

实现您想要的效果在一定程度上取决于 TreeNodeReducer 处理的状态。

如果 reducer 只处理 tree 属性，像这样:

function treeNodeReducer(state = initialState, action) {
  switch (action.type) {
    case SOME_ACTION:
      return Object.assign({}, state, { tree: action.tree, ... })
    default:
      return state
  }
}

我会说更改 reducer 以消除 tree 属性并将其直接与状态合并，如下所示:

function treeNodeReducer(state = initialState, action) {
  switch (action.type) {
    case SOME_ACTION:
      return Object.assign({}, state, action.tree)
    default:
      return state
  }
}

这样我们就可以使用 state.treeNodeReducer 访问 mapStateToProps 中的树对象。

但这仍然不是我们想要的。我们想将 treeNodeReducer 重命名为 tree。有两种解决方案:

1. 要么:

   import { combineReducers } from 'redux';
   import TreeNodeReducer from './TreeNodeReducer'
   
   const rootReducer = combineReducers({
     tree: TreeNodeReducer
   });
   
   export default rootReducer;
   

2. 或者:

   import { combineReducers } from 'redux';
   import tree from './TreeNodeReducer'
   
   const rootReducer = combineReducers({
     tree
   });
   
   export default rootReducer;
   

这样我们就可以使用 state.tree 访问 mapStateToProps 中的树对象。