+ {/* this was DUMMY_DATA BUT WE GET THE STATE FROM THE PROPS ON didMount*/}
+ {this.props.students.map((student) => (
Name: {student.fullName}
Email: {student.email}
+
+ View Detail
+
))}
@@ -40,4 +53,31 @@ class StudentList extends React.Component {
}
}
-export default StudentList;
+// Mapping the inital state array from the store to this componenet
+// we only need students - so state.students is going to STORE and giving us the initialState ={ students: [] }
+const mapStateToProps = (state) => {
+ console.log('MAP STATE TO PROPS')
+ return {
+ students: state.students
+ }
+}
+
+// This is mapping the to the THUNK creator that we need to dispatch the action to update the state in the reducer
+//
+function mapDispatchToProps(dispatch) {
+ console.log('MAPDISPATCH TO PROPS')
+ return {// This is a reference to store.dispatch
+ loadStudents: () => {dispatch(fetchStudents())}// Wrapper function that dispatches the action
+ }
+}
+// you can name loadStudents anything : you are just naming this function
+// this only exists in this component
+// you are dispatching the THUNK and since the thunk took no parameters you give none here.
+
+// if you have a component that doesn't take state then you don't need state.
+
+export default connect(mapStateToProps, mapDispatchToProps)(StudentList)
+// connect is just something from React Redux
+// it just gives them both access
+
+
diff --git a/client/redux/store.js b/client/redux/store.js
index 0a46179..75e1e4a 100644
--- a/client/redux/store.js
+++ b/client/redux/store.js
@@ -4,39 +4,80 @@ import axios from 'axios';
import thunkMiddleware from 'redux-thunk';
// ACTION TYPES go here:
-const GOT_STUDENTS = 'GOT_STUDENTS';
+const GET_STUDENTS = 'GET_STUDENTS'
+const GET_SINGLE_STUDENT = 'GET_SINGLE_STUDENT'
// ACTION CREATORS go here:
-const gotStudents = (students) => ({
- type: GOT_STUDENTS,
- students
-});
+export const getStudents = (students) => {
+ return {
+ type: GET_STUDENTS,
+ students
+ }
+};
-// THUNK CREATORS go here:
-const fetchStudents = () => async (dispatch) => {
- const {data} = await axios.get('/api/students');
- dispatch(gotStudents(data));
+
+export const getSingleStudent = (id) => {
+ return {
+ type: GET_SINGLE_STUDENT,
+ student
+ }
}
+// THUNK CREATORS go here:
+
+// Student List THUNK
+// If you are doing a getAll() call - then you don't need to put any params
+
+export const fetchStudents = () => {
+ return async (dispatch) => {
+ try {
+ const {data} = await axios.get('/api/students')
+ dispatch(getStudents(data))
+ } catch(err) {
+ console.log(err)
+ }
+ }
+};
+
+// Single Student THUNK
+export const fetchSingleStudent = (id) => {
+ return async (dispatch) => {
+ try {
+ const {data} = await axios.get(`/api/students/${id}`)
+ dispatch(getSingleStudent(data))
+ } catch (err) {
+ console.log(err)
+ }
+ }
+};
+
+
+//_________________________________________________
const initialState = {
- students: []
+ students: [] // you missed this !! itemize initialState
};
const reducer = (state = initialState, action) => {
switch(action.type) {
- case GOT_STUDENTS:
- return {
- students: action.students
- }
+ case GET_STUDENTS:
+ return {
+ students: action.students
+ } //students must match within the Action Creator
+ // This is just replacing the empty intial state [] with a new array gotten from the action creator & the thunk
+ case GET_SINGLE_STUDENT:
+ return action.student
default:
return state;
}
-}
+};
const store = createStore(reducer, applyMiddleware(thunkMiddleware, loggerMiddleware));
+// dispatch your own actions here to test your store functionality:
+store.dispatch({type: 'HELLO_WORLD'})
+// ^ you can see the logs above in your console, thanks to redux-logger!
export default store;