Mise en place de la connexion entre reducers et action parles containers

Author: JoPFullJS

package.json

@@ -7,7 +7,7 @@
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "react-redux": "^5.0.5",
-    "react-router": "^4.1.2",
+    "react-router": "3",
     "react-scripts": "1.0.10",
     "redux": "^3.7.2",
     "redux-thunk": "^2.2.0"

public/index.html

@@ -36,5 +36,7 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+      <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
+      <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>
   </body>
 </html>

src/actions/index.js

@@ -2,10 +2,13 @@
 import axios from 'axios';
 
 //Liste des actions
-import * from '../constants/actionTypes';
+import {
+	FETCH_INTERVENTIONS,FETCH_INTERVENTIONS_SUCCESS,FETCH_INTERVENTIONS_FAILURE,
+	FETCH_COMPETENCES,FETCH_COMPETENCES_SUCCESS,FETCH_COMPETENCES_FAILURE
+	} from '../constants/actionTypes';
 
 // Point d'entré de notre API
-const ROOT_URI = 'http://localhost:3000';
+const ROOT_URI = 'http://127.0.0.1:8000';
 
 /*--------  Listes des action du domaine d'intervention -------------*/
 

src/components/App.js

@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import logo from '../assets/img/logo.svg';
 import '../assets/css/App.css';
 
 class App extends Component {

src/components/competences.js

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 //import { Link } from 'react-router';
+import { connect } from 'react-redux';
+import * as actions from '../actions/index';
 
 class Competences extends Component {
 
@@ -8,20 +10,19 @@ class Competences extends Component {
 	}
 
 	renderCompetences(competences) {
-		return competences.map((competence) => {
-			return {
-				<div>
-					<h3>{competence.titre}</h3>
-					<p>{competence.description}</p>
-				</div>
-			};
+		return ((competence) => {
+			return ( 
+				<li key={competence.id}>
+					<p>{competence.titre}</p>
+				</li>
+			);
 		});
 	}
 
 	render() {
-		const { competences, error, loding } = this.props.competencesList;
+		const { competences, error, loading } = `${this.props.competencesList}`;
 
-		if(loding) {
+		if(loading) {
 			return <div className="interventions">Loading...</div>
 		}
 		else if(error) {
@@ -30,10 +31,18 @@ class Competences extends Component {
 		return (
 			<div>
 				<h2>Divers Competences</h2>
-				{this.renderCompetences(competences)}
+				<ul>
+					{this.renderCompetences(competences)}
+				</ul>
 			</div>
 		);
 	}
 }
 
-export default Competences;
+function mapStateToProps(state) {
+	return{
+	 	competencesList: state.competencesList
+	}
+}
+
+export default connect(mapStateToProps,actions)(Competences);

src/components/interventions.js

@@ -1,39 +1,53 @@
+'use strict';
 import React, { Component } from 'react';
 //import { Link } from 'react-router';
+import {bindActionCreators} from 'redux';
+import { connect } from 'react-redux';
+
+
+import {fetchInterventions} from '../actions/index';
+
+import {getInterventions} from '../reducers/intervention_reducer'
 
 class Interventions extends Component {
 
-	ComponentWillMount() {
-		this.props.fetchInterventions();
+	componentWillMount() {
+		this.props.listActions;
 	}
 
-	renderCompetences(interventions) {
-		return interventions.map((intervention) => {
-			return {
-				<div>
-					<h3>{intervention.nom}</h3>
-					<p>{intervention.description}</p>
+	renderInterventions(interventions) {
+		interventions.map(interventions => {
+			return ( 
+				<div  key={interventions.id}>
+					<h3>{interventions.nom}</h3>
+					<p>{interventions.description}</p>
 				</div>
-			};
+			);
 		});
 	}
 
 	render() {
-		const { interventions, error, loding } = this.props.interventionsList;
-
-		if(loding) {
-			return <div className="interventions">Loading...</div>
-		}
-		else if(error) {
-			return <div className="alert">Error : {error}</div>
-		}
+		const interventions = this.props.interventionsList;
+
 		return (
 			<div>
-				<h2>Divers Competences</h2>
+				<h2>Divers Interventions</h2>
 				{this.renderInterventions(interventions)}
 			</div>
 		);
+	};
+}
+
+function mapDispatchToProps(dispatch){
+  return {
+    listActions: bindActionCreators(fetchInterventions, dispatch)
+  }
+}
+
+function mapStateToProps(state) {
+	return{
+	 	interventionsList: state.getInterventions
 	}
 }
 
-export default Interventions;
+export default connect(mapStateToProps,mapDispatchToProps)(Interventions);

src/constants/actionTypes.js

@@ -1,5 +1,3 @@
-//Asyncrone request and Promise based HTTP client for the browser
-import axios from 'axios';
 
 //Liste des Interventins 
 export const FETCH_INTERVENTIONS = 'FETCH_INTERVENTIONS';

src/containers/competencesContainer.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import * as actions from '../actions/index';
+
+import Competences from '../components/Competences';
+
+function mapStateToProps(state) {
+	return{
+	 	competencesList: state.competencesList
+	}
+}
+
+export default connect(mapStateToProps,actions)(Competences);

src/containers/interventionsContainer.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import * as actions from '../actions/index';
+
+import Interventions from '../components/Interventions';
+
+function mapStateToProps(state) {
+	return{
+	 	interventionsList: state.interventionsList
+	}
+}
+
+export default connect(mapStateToProps,actions)(Interventions);

src/index.js

@@ -8,7 +8,8 @@ import routes from './routes/index';
 
 import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
-import reducers from './reducers';
+import reducers from './reducers/index';
+
 
 const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
 const store = createStoreWithMiddleware(reducers);