PLUT-2 Redux

.gitignore

@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
+/.idea
+package-lock.json
 # dependencies
 /node_modules
 /.pnp

package.json

@@ -5,7 +5,11 @@
   "dependencies": {
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-scripts": "2.1.1"
+    "react-redux": "^6.0.0",
+    "react-scripts": "2.1.1",
+    "redux": "^4.0.1",
+    "redux-logger": "^3.0.6",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,28 +1,27 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, {Component} from 'react';
 import './App.css';
+import {} from './redux/actions/actions';
+import { connect } from "react-redux";
 
 class App extends Component {
+
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>
-            Edit <code>src/App.js</code> and save to reload.
-          </p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-        </header>
+        <h1>APP redux ready</h1>
+
       </div>
     );
   }
 }
 
-export default App;
+
+// THIS METHODS BELOW HAVE TO BE IN EVERY COMPONENT FILE IF ACCESS TO REDUX STORE NEEDED
+const mapStateToProps = state => {
+  return {
+  };
+};
+const mapDispatchToProps = dispatch => ({
+
+})
+export default connect(mapStateToProps, mapDispatchToProps)(App);

src/index.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {Provider} from 'react-redux';
 import './index.css';
-import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import App from './App';
+import store from './redux/store/store'
+
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App/>
+  </Provider>,
+  document.getElementById('root')
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/redux/actionTypes/actionTypes.js

@@ -0,0 +1 @@
+export const ACTION_TYPE = 'ACTION_TYPE';

src/redux/actions/actions.js

@@ -0,0 +1,12 @@
+function increment () {
+
+}
+
+function decrement () {
+
+}
+
+export default {
+  increment,
+  decrement
+}

src/redux/reducers/rootReducer.js

@@ -0,0 +1,11 @@
+import { combineReducers } from 'redux';
+
+// @REDUCERS
+import testReducer from './testReducer';
+
+// @ROOT REDUCER
+const rootReducer = combineReducers({
+  testReducer
+});
+
+export default rootReducer;

src/redux/reducers/testReducer.js

@@ -0,0 +1,26 @@
+const initialState = {
+  testField: 'tratata',
+  lastAction: null,
+  value: 0
+};
+
+function testReducer(state = initialState, action) {
+  switch (action.type) {
+    case 'INCREMENT':
+      return {
+        ...state,
+        lastAction: action.type,
+        value: ++initialState.value
+      };
+    case 'DECREMENT':
+      return {
+        ...state,
+        lastAction: action.type,
+        value: --initialState.value
+      };
+    default:
+      return state;
+  }
+}
+
+export default testReducer;

src/redux/store/store.js

@@ -0,0 +1,14 @@
+import {createStore, applyMiddleware, compose} from 'redux';
+import rootReducer from '../reducers/rootReducer';
+import thunk from 'redux-thunk';
+import logger from 'redux-logger';
+
+const store = createStore(
+  rootReducer,
+  compose(
+    applyMiddleware(logger, thunk),
+    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+  )
+);
+
+export default store;