寫`state.tree`，而不是`state.xxxReducer.tree`在`mapStateToProps`（反應終極版）

Question

我必須寫mapStateToProps像下面

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

結合減速機：

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

const rootReducer = combineReducers({ 
    TreeNodeReducer 
}); 

export default rootReducer; 

減速器/ 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是一個全球性的狀態，它容納所有節點的信息，I W ant通過狀態直接訪問它。通過reducer的狀態返回將按reducer的名稱進行包裝，這對於簡單的項目並不方便。 Office doc不提供這種方式。任何想法？

PS：我不得不說我想繼續使用combineReducers，我看到有些項目不使用它，直接通過reducer存儲可以達到我的目的但不好。

Answer 1

實現你的願望取決於TreeNodeReducer處理的狀態。

如果減速只是處理tree屬性，像這樣：

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

我要說改變減速消除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樹對象。