connect

src/actions/header.js

-export const UPDATE_LANE = 'UPDATE_LANE';
-export function updateLane(updatedLane) {
-  return {
-    type: UPDATE_LANE,
-    ...updatedLane
-  };
-};
+export const toggleTodo = (id) => ({
+  type: 'TOGGLE_TODO',
+  id
+})

src/components/ElementGroup.js

@@ -2,20 +2,10 @@ import React from 'react'
 import Element from './Element'
 import ReactAddonsUpdate from 'react-addons-update'
 import autobind from 'autobind-decorator'
+import { connect } from 'react-redux'
 
 @autobind
-export default class ElementGroup extends React.Component {
-  constructor(props){
-    super(props);
-    this.state = {
-      elements: [
-        { id: 1, name: "药库", initialPos: {x: 80, y: 70}, target_type: 'RegionalDesign::Repo' },
-        { id: 2, name: "药架", initialPos: {x: 80, y: 70 + 60}, target_type: 'RegionalDesign::DrugRepo' },
-        { id: 3, name: "药架格", initialPos: {x: 80, y: 70 + 60 * 2}, target_type: 'RegionalDesign::DrugBrandreth' }
-      ]
-    };
-  }
-
+class ElementGroup extends React.Component {
   cloneElement(element) {
     const elements = ReactAddonsUpdate(this.state.elements, { $push: [element] })
     this.setState({elements: elements})
@@ -38,10 +28,11 @@ export default class ElementGroup extends React.Component {
   }
 
   render() {
+    const { elements } = this.props
     return (
       <div>
         {
-          this.state.elements.map(function(element) {
+          elements.map(function(element) {
             return (
               <Element meta_element={ element } key={ "key_" + element.id } id={ element.id } name={ element.name } initialPos={ element.initialPos } target_type={ element.target_type } handleCloneElement={ this.cloneElement } handleDeleteElement={ this.deleteElement } handleDeleteLastElement={ this.deleteLastElement } />
             )
@@ -51,3 +42,17 @@ export default class ElementGroup extends React.Component {
     )
   }
 }
+
+const mapStateToProps = (state, ownProps) => ({
+  elements: state.headergroup
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+})
+
+const VisibleElementGroup = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ElementGroup)
+
+export default VisibleElementGroup

src/reducers/header.js

-const header = (state = {}, action) => {
-  return state;
-}
-
-export default header

src/reducers/headergroup.js

+const init_state = [
+  { id: 1, name: "药库", initialPos: {x: 80, y: 70}, target_type: 'RegionalDesign::Repo' },
+  { id: 2, name: "药架", initialPos: {x: 80, y: 70 + 60}, target_type: 'RegionalDesign::DrugRepo' },
+  { id: 3, name: "药架格", initialPos: {x: 80, y: 70 + 60 * 2}, target_type: 'RegionalDesign::DrugBrandreth' }
+]
+
+const headergroup = (state = init_state, action) => {
+  return state
+}
+
+export default headergroup

src/reducers/index.js

 import { combineReducers } from 'redux';
 
-import header from './header';
+import headergroup from './headergroup';
 
 const rootReducer = combineReducers({
-  header
+  headergroup
 });
 
 export default rootReducer;