Connect to React + Thunk

5_Redux/2_redux-thunk/package.json

@@ -8,8 +8,10 @@
     "@testing-library/user-event": "^12.2.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
     "react-scripts": "4.0.0",
     "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

5_Redux/2_redux-thunk/src/App.js

@@ -1,22 +1,16 @@
-
+import React from 'react'
 import './App.css';
-import {createStore } from 'redux'
-import rootReducer from './reducers'
-
-import {droidActions} from './app/droids/duck'
-
-// ---------------------------- Store -----------------------
 
-const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())
-window.store = store 
+import DroidsContainer from './app/droids/components/DroidsContainer'
+import DroidsForm from './app/droids/components/DroidsForm'
 
-store.dispatch(droidActions.add('D-O'))
 
 
 function App() {
   return (
     <div className="App">
-
+      <DroidsContainer/>
+      <DroidsForm/>
     </div>
   );
 }

5_Redux/2_redux-thunk/src/app/droids/components/DroidsContainer.js

@@ -0,0 +1,36 @@
+import React, {useEffect} from 'react';
+import {connect} from 'react-redux'
+import {getAllDroids} from '../duck/operations'
+
+const DroidsContainer = ({droids,getAllDroids}) => {
+
+    useEffect(() => {
+        console.log(getAllDroids());
+        console.log("ComponentDidMount");
+    },[])
+
+
+    return (
+        <ul>
+            {droids.list.map((droid,i)=> 
+                <li key={i}>{droid}</li>
+                )}
+        </ul>
+    );
+}
+// przyjmuje stan i zwraca obiekt z zawartością stanu znajdującą się pod kluczem droids
+const mapStateToProps = state => ({
+    droids : state.droids
+})
+
+// funkcja wywołująca funkcję dispatch z parametrem funkcji, która ma być wykonana
+const mapDispatchToProps = dispatch => ({
+    getAllDroids : ()=> dispatch(getAllDroids())
+})
+
+
+// funkcja connect
+// 1. argument - mapowanie elementów ze stora, które mają być przyjęte w komponencie jako propsy
+// 2. obiekt przyjmujący dane z API
+export default connect(mapStateToProps, mapDispatchToProps)(DroidsContainer);
+

5_Redux/2_redux-thunk/src/app/droids/components/DroidsForm.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import {connect} from 'react-redux'
+import actions from '../duck/actions'
+
+const DroidsForm = (props) => {
+
+    const droidInput = React.createRef()
+
+    const addDroid = event => {
+        event.preventDefault()
+        // podanie stora na którym ma się dokonać operacja dodania
+        // add jest kluczem w obiekcie zwróconym przez mapDispatchToProps
+        props.add(droidInput.current.value)
+        console.log('form', droidInput.current.value)
+        droidInput.current.value = ''
+    }
+
+    return (
+        <form onSubmit={addDroid}>
+            <input ref={droidInput}/>
+            <button type="submit">Add droid</button>
+        </form>
+    );
+}
+
+// przygotowanie obiektu, który zawiera funkcje jakie należy wywołać na storze
+const mapDispatchToProps = dispatch => ({
+    add: droid => dispatch(actions.add(droid))
+})
+
+// null ponieważ state nie jest sczytywany
+export default connect(null, mapDispatchToProps)(DroidsForm);

5_Redux/2_redux-thunk/src/app/droids/duck/operations.js

@@ -0,0 +1,19 @@
+// akcje generują state
+import actions from "./actions";
+
+const fetchDroids = async () => {
+    const response = await fetch('http://localhost:3001/droidsTypes', { method: 'GET' })
+    const json = await response.json()
+    console.log('json');
+    return json
+};
+
+// thunk - zwraca funkcję asynchroniczną i przekaże w niej dispatcha powodując zmianę statu
+// export const getAllDroids = () => {
+
+export const getAllDroids = () =>
+  async (dispatch) => {
+    const droids = await fetchDroids()
+    console.log(droids);
+    droids['list'].map(droid => dispatch(actions.add(droid)))
+  }

5_Redux/2_redux-thunk/src/app/droids/duck/reducers.js

@@ -1,8 +1,8 @@
 import types from './types'
 
 const INITIAL_STATE = {
-  droidsName: "Favorite",
-  list: ["R2D2", "C3PO", "BB8"],
+  droidsName: "Types",
+  list: [],
 };
 
 const droidsReducer = (state = INITIAL_STATE, action) => {

5_Redux/2_redux-thunk/src/index.js

@@ -4,10 +4,13 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+import {Provider} from 'react-redux'
+import store from './store'
+
 ReactDOM.render(
-  <React.StrictMode>
+  <Provider store={store}>
     <App />
-  </React.StrictMode>,
+  </Provider>,
   document.getElementById('root')
 );
 

5_Redux/2_redux-thunk/src/jsServer/db.json

@@ -0,0 +1,11 @@
+{
+    "droidsClasses" : {
+        "listName": "Classes",
+        "list": ["Protocol droid", "Astromech droid", "Power droid", "Utility droid"]
+    },
+    "droidsTypes" : {
+        "listName": "Types",
+        "list": ["R2D2", "C3PO", "BB8"]
+    }
+
+}

5_Redux/2_redux-thunk/src/store.js

@@ -0,0 +1,9 @@
+import {createStore, applyMiddleware } from 'redux'
+import rootReducer from './reducers'
+import thunk from 'redux-thunk'
+
+
+const store = createStore(rootReducer, applyMiddleware(thunk))
+// window.store = store 
+
+export default store