Add UpdateBackground feature

Author: snamiki1212

src/actions/index.jsx

@@ -0,0 +1,5 @@
+
+export const updateBackgroundColor = (hex) => ({
+  type: "UPDATE_BACKGROUND_COLOR",
+  hex
+})

src/containers/Controller.js

@@ -2,31 +2,35 @@ import React from 'react';
 import { connect } from 'react-redux';
 import creater from '../components/creater';
 import { SketchPicker } from 'react-color';
+import { updateBackgroundColor } from '../actions';
 
-const handleChangeComplete = (color) => {
-  console.log(color.hex);
-  return {
-    background: color.hex
-  };
-}
+// const handleChangeComplete = (color) => {
+//   console.log(color.hex);
+//   dispatch(updateBackgroundColor(color.hex));
+//   return {
+//     background: color.hex
+//   };
+// }
 
-const Controller = () => {
+const Controller = ({ updateBackgroundColor }) => {
   let backgroundColor = 'red';
   return(
     <div>
       Controller
       <SketchPicker
         color={backgroundColor}
-        onChangeComplete={handleChangeComplete}
+        onChangeComplete={(color) => updateBackgroundColor(color.hex)}
       />
       <button onClick={() => creater('my-node')}>CREATE</button>
-      
-      
     </div>
   )
 }
-const mapStateToProps = (state) => state
-const mapDispatchToProps = (dispatch) => ({});
+
+const mapStateToProps = (state) => ({ backgroundColor: state.backgroundColor });
+
+const mapDispatchToProps = (dispatch) => ({
+  updateBackgroundColor: (hex) => dispatch(updateBackgroundColor(hex))
+});
 
 export default connect(
   mapStateToProps,

src/reducers/background.js

@@ -0,0 +1,9 @@
+export const updateBackgroundColor = (state = [], action) => {
+  switch(action.type){
+    case "UPDATE_BACKGROUND_COLOR":
+      return action.hex;
+    default:
+      return state;
+  }
+}
+

src/reducers/index.js

@@ -1,5 +1,6 @@
 import { combineReducers } from 'redux';
+import { updateBackgroundColor } from './background';
 
-export default combineReducers({}
-  // 
-);
+export default combineReducers({
+  updateBackgroundColor
+});