mirror of
				https://github.com/reduxjs/redux-devtools.git
				synced 2025-10-30 23:47:35 +03:00 
			
		
		
		
	| - remotedev-redux-devtools-extension@3.0.0 - d3-state-visualizer@1.4.2 - d3tooltip@1.3.2 - map2tree@1.5.2 - react-base16-styling@0.8.2 - react-dock@0.4.2 - react-json-tree@0.15.2 - @redux-devtools/app@1.0.0 - @redux-devtools/chart-monitor@1.9.2 - @redux-devtools/cli@1.0.0 - @redux-devtools/dock-monitor@1.4.2 - @redux-devtools/extension@3.0.0 - @redux-devtools/inspector-monitor-test-tab@0.7.4 - @redux-devtools/inspector-monitor-trace-tab@0.2.4 - @redux-devtools/inspector-monitor@1.0.2 - @redux-devtools/instrument@1.11.2 - @redux-devtools/log-monitor@2.3.2 - @redux-devtools/remote@0.6.1 - @redux-devtools/rtk-query-monitor@1.0.2 - @redux-devtools/serialize@0.3.2 - @redux-devtools/slider-monitor@2.0.0 - @redux-devtools/ui@1.0.0 - @redux-devtools/utils@1.0.0 - @redux-devtools/core@3.9.2 - d3-state-visualizer-tree-example@0.1.2 - react-dock-demo@0.1.2 - react-json-tree-example@1.1.4 - test-demo@0.1.2 - inspector-demo@0.1.2 - rtk-query-demo@0.1.2 - slider-todomvc@0.1.4 - counter-redux@0.1.4 - todomvc@0.2.3 | ||
|---|---|---|
| .. | ||
| src | ||
| test | ||
| .babelrc | ||
| .eslintignore | ||
| .eslintrc.js | ||
| CHANGELOG.md | ||
| jest.config.js | ||
| LICENSE.md | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
| tsconfig.webpack.json | ||
| webpack.config.umd.ts | ||
A pure function to convert a map into a tree structure. Created by @romseguy and merged from romseguy/map2tree.
The following opinions must be taken into account since the primary use case of this library is redux-devtools-chart-monitor:
- Objects and arrays deeply nested within collections are not converted into a tree structure. See someNestedObjectandsomeNestedArrayin the output below, or the corresponding test.
- Provides support for Immutable.js data structures (only List and Map though).
Usage
map2tree(
  someMap,
  (options = {
    key: 'state', // the name you want for as the root node of the output tree
    pushMethod: 'push', // use 'unshift' to change the order children nodes are added
  })
);
Input
const someMap = {
  someReducer: {
    todos: [
      { title: 'map', someNestedObject: { foo: 'bar' } },
      { title: 'to', someNestedArray: ['foo', 'bar'] },
      { title: 'tree' },
      { title: 'map2tree' },
    ],
    completedCount: 1,
  },
  otherReducer: {
    foo: 0,
    bar: { key: 'value' },
  },
};
Output
{
  name: `${options.key}`,
  children: [
    {
      name: 'someReducer',
      children: [
        {
          name: 'todos',
          children: [
            {
              name: 'todo[0]',
              object: {
                title: 'map',
                someNestedObject: {foo: 'bar'}
              }
            },
            {
              name: 'todo[1]',
              object: {
                title: 'to',
                someNestedArray: ['foo', 'bar']
              }
            },
            // ...
          ]
        },
        // ...
      ]
    },
    {
      name: 'otherReducer',
      children: [
        {
          name: 'foo',
          value: 0
        },
        {
          name: 'bar',
          object: {
            key: 'value'
          }
        }
      ]
    }
  ]
}