title
Full Stack React & Django [3] - Redux & HTTP

description
In part 3 we will implement Redux and start making calls to the API within actions. We will setup our lead reducer and make the form and leads component functional. Code: https://github.com/bradtraversy/lead_manager_react_django Helpful Links & Tuorials: https://www.django-rest-framework.org https://www.valentinog.com/blog/tutorial-api-django-rest-react/#Django_REST_with_React_Django_and_React_together http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Full Stack React & Django [3] - Redux & HTTP', 'heatmap': [{'end': 1279.716, 'start': 1243.175, 'weight': 0.726}, {'end': 1526.959, 'start': 1352.852, 'weight': 0.705}, {'end': 1979.233, 'start': 1950.876, 'weight': 1}, {'end': 2236.916, 'start': 2203.261, 'weight': 0.715}], 'summary': 'Covers implementing redux for application-level state management within the django front end app, setting up redux for react, reducing redux actions and types, integrating redux with ui for http request handling, and creating forms with redux action creation and state management.', 'chapters': [{'end': 38.731, 'segs': [{'end': 38.731, 'src': 'embed', 'start': 0.129, 'weight': 0, 'content': [{'end': 0.589, 'text': 'All right, guys.', 'start': 0.129, 'duration': 0.46}, {'end': 3.071, 'text': 'So in the last video, we implemented react.', 'start': 0.689, 'duration': 2.382}, {'end': 6.974, 'text': 'We installed Webpack and Babel, React, React, Dom, all that stuff,', 'start': 3.211, 'duration': 3.763}, {'end': 14.6, 'text': "and we got it all working so that we're actually displaying our react application within the Django front end app.", 'start': 6.974, 'duration': 7.626}, {'end': 20.382, 'text': 'So now what I want to do is implement Redux because we need a single source of truth.', 'start': 15.26, 'duration': 5.122}, {'end': 25.245, 'text': "We basically need application level state because we're going to have, for instance, leads.", 'start': 20.402, 'duration': 4.843}, {'end': 27.306, 'text': "We're going to have authentication,", 'start': 25.265, 'duration': 2.041}, {'end': 34.149, 'text': "which is the main reason I'm using Redux so that we have a state where it can tell us if we're authenticated or not,", 'start': 27.306, 'duration': 6.843}, {'end': 36.93, 'text': 'can tell us what user is is logged in.', 'start': 34.149, 'duration': 2.781}, {'end': 37.63, 'text': 'things like that.', 'start': 36.93, 'duration': 0.7}, {'end': 38.731, 'text': 'Give us the user data.', 'start': 37.67, 'duration': 1.061}], 'summary': 'Implemented react and now need to implement redux for application-level state and authentication.', 'duration': 38.602, 'max_score': 0.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0129.jpg'}], 'start': 0.129, 'title': 'Implementing redux for application level state', 'summary': 'Covers the implementation of redux to establish a single source of truth for application-level state, facilitating authentication and user data management within the django front end app.', 'chapters': [{'end': 38.731, 'start': 0.129, 'title': 'Implementing redux for application level state', 'summary': 'Covers the implementation of redux to establish a single source of truth for application-level state, facilitating authentication and user data management within the django front end app.', 'duration': 38.602, 'highlights': ['The implementation of Redux is necessary to establish a single source of truth for application level state, particularly for managing authentication and user data within the Django front end app.', 'Redux will facilitate the management of authentication, providing a state that can determine if a user is authenticated, their logged-in status, and user data.', 'In the previous video, React, Webpack, Babel, React, and React Dom were successfully installed and integrated to display the react application within the Django front end app.']}], 'duration': 38.602, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0129.jpg', 'highlights': ['The implementation of Redux is necessary to establish a single source of truth for application level state, particularly for managing authentication and user data within the Django front end app.', 'Redux will facilitate the management of authentication, providing a state that can determine if a user is authenticated, their logged-in status, and user data.', 'In the previous video, React, Webpack, Babel, React, and React Dom were successfully installed and integrated to display the react application within the Django front end app.']}, {'end': 578.883, 'segs': [{'end': 94.714, 'src': 'embed', 'start': 66.274, 'weight': 2, 'content': [{'end': 71.778, 'text': 'So one thing that I would highly recommend is installing the Redux dev tools for Chrome.', 'start': 66.274, 'duration': 5.504}, {'end': 74.72, 'text': 'So if you go here, just go ahead and install it.', 'start': 72.739, 'duration': 1.981}, {'end': 80.924, 'text': 'And then when you open your Chrome tools, you should have a tab for Redux.', 'start': 74.82, 'duration': 6.104}, {'end': 86.348, 'text': "OK, and you'll see no store found right now because I'm obviously I haven't installed it yet.", 'start': 80.944, 'duration': 5.404}, {'end': 87.569, 'text': "I haven't set up my store.", 'start': 86.368, 'duration': 1.201}, {'end': 94.714, 'text': "But once you do that, you'll see a clear image of of what your Redux store looks like in all your state.", 'start': 87.869, 'duration': 6.845}], 'summary': 'Install redux dev tools for chrome to visualize redux store and state.', 'duration': 28.44, 'max_score': 66.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ066274.jpg'}, {'end': 146.934, 'src': 'embed', 'start': 115.787, 'weight': 1, 'content': [{'end': 117.948, 'text': "It's just very popular to use with react.", 'start': 115.787, 'duration': 2.161}, {'end': 122.61, 'text': 'And this react Redux package is what basically binds them together.', 'start': 118.608, 'duration': 4.002}, {'end': 123.63, 'text': 'All right.', 'start': 123.35, 'duration': 0.28}, {'end': 124.79, 'text': "So we're going to want that.", 'start': 123.65, 'duration': 1.14}, {'end': 125.231, 'text': "Let's see.", 'start': 124.87, 'duration': 0.361}, {'end': 128.952, 'text': "We're also going to want Redux thunk.", 'start': 125.251, 'duration': 3.701}, {'end': 136.927, 'text': "So Redux Thunk is a piece of middleware that we're going to use so that we can make a synchronous request from our actions.", 'start': 130.743, 'duration': 6.184}, {'end': 146.934, 'text': "And then we're also going to install the Redux dash DevTools dash extension,", 'start': 138.268, 'duration': 8.666}], 'summary': 'React redux is popular, using redux thunk for synchronous requests.', 'duration': 31.147, 'max_score': 115.787, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0115787.jpg'}, {'end': 329.217, 'src': 'embed', 'start': 301.028, 'weight': 0, 'content': [{'end': 308.512, 'text': "And then let's create another variable for any middleware we're going to use, which is going to be an array and we're just going to have funk.", 'start': 301.028, 'duration': 7.484}, {'end': 316.796, 'text': 'OK, then we want to create our store, our store variable and set that to create store, which we just brought in up above.', 'start': 310.012, 'duration': 6.784}, {'end': 319.817, 'text': 'OK, now this takes in a couple of things.', 'start': 316.816, 'duration': 3.001}, {'end': 321.358, 'text': 'It takes in your root reducer.', 'start': 319.877, 'duration': 1.481}, {'end': 329.217, 'text': 'which will create in a minute it takes in the initial state which we just added up above and then any middleware we want.', 'start': 322.588, 'duration': 6.629}], 'summary': 'Creating store variable with middleware as an array', 'duration': 28.189, 'max_score': 301.028, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0301028.jpg'}, {'end': 403.129, 'src': 'embed', 'start': 375.037, 'weight': 4, 'content': [{'end': 378.298, 'text': "And we're going to create a file called index dot J.S.", 'start': 375.037, 'duration': 3.261}, {'end': 381.479, 'text': "OK, so that's this is the file that that that this is pointing to.", 'start': 378.298, 'duration': 3.181}, {'end': 387.222, 'text': 'And the root reducer is basically just a meeting place for all of your other reducers.', 'start': 382.72, 'duration': 4.502}, {'end': 393.625, 'text': "So for instance, we're going to have a leads reducer that hands down the state that has to do with leads.", 'start': 387.802, 'duration': 5.823}, {'end': 396.486, 'text': "We're going to have an auth reducer for authentication.", 'start': 393.905, 'duration': 2.581}, {'end': 403.129, 'text': "We're going to have an errors reducer for bringing errors down to whatever components we want to bring errors into.", 'start': 396.526, 'duration': 6.603}], 'summary': 'Creating index.js file and defining reducers for leads, authentication, and errors.', 'duration': 28.092, 'max_score': 375.037, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0375037.jpg'}, {'end': 500.407, 'src': 'embed', 'start': 457.963, 'weight': 5, 'content': [{'end': 461.566, 'text': 'Remember, React Redux is the package that integrates the two together.', 'start': 457.963, 'duration': 3.603}, {'end': 468.732, 'text': "So let's first bring in, let's say, import provider.", 'start': 462.267, 'duration': 6.465}, {'end': 475.357, 'text': 'And we want to bring this in from React-Redux.', 'start': 470.733, 'duration': 4.624}, {'end': 488.404, 'text': 'And then we also want to import our store from dot dot slash store.', 'start': 479.082, 'duration': 9.322}, {'end': 490.045, 'text': 'All right.', 'start': 489.725, 'duration': 0.32}, {'end': 496.786, 'text': 'Now, the way that we connect Redux to react is through this provider.', 'start': 490.125, 'duration': 6.661}, {'end': 500.407, 'text': 'Now, this provider, we actually need to wrap around everything.', 'start': 497.307, 'duration': 3.1}], 'summary': 'React redux integrates with provider to connect redux to react', 'duration': 42.444, 'max_score': 457.963, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0457963.jpg'}, {'end': 587.686, 'src': 'embed', 'start': 556.248, 'weight': 3, 'content': [{'end': 563.556, 'text': 'So if you, if you create an action like submit a form or something like that, and you call an action and it changes your state,', 'start': 556.248, 'duration': 7.308}, {'end': 565.038, 'text': 'it sends down different state.', 'start': 563.556, 'duration': 1.482}, {'end': 566.139, 'text': "It'll be in this diff.", 'start': 565.118, 'duration': 1.021}, {'end': 572.702, 'text': 'OK, and any action that you you commit or you create is going to get shown here as well.', 'start': 566.94, 'duration': 5.762}, {'end': 574.602, 'text': "So this is I don't know.", 'start': 572.742, 'duration': 1.86}, {'end': 577.863, 'text': "I couldn't build with Redux without this extension.", 'start': 574.722, 'duration': 3.141}, {'end': 578.883, 'text': "It's very important.", 'start': 577.903, 'duration': 0.98}, {'end': 587.686, 'text': "So let's go back to the reducer, the root reducer, which is where is it? I'm lost.", 'start': 580.104, 'duration': 7.582}], 'summary': 'Discussion about using redux extension for state changes and the importance of it for development.', 'duration': 31.438, 'max_score': 556.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0556248.jpg'}], 'start': 39.826, 'title': 'Implementing redux with react', 'summary': 'Discusses setting up redux for react by recommending useful tools, installing necessary packages, and creating a store with specific middleware and root reducer, emphasizing the importance of redux dev tools and redux thunk. it also covers implementing redux with react, including creating a root reducer, connecting redux to react using a provider, and using the redux devtools extension for state management and action tracking.', 'chapters': [{'end': 344.65, 'start': 39.826, 'title': 'Setting up redux for react', 'summary': 'Discusses setting up redux for react by recommending useful tools, installing necessary packages, and creating a store with specific middleware and root reducer, emphasizing the importance of redux dev tools and redux thunk.', 'duration': 304.824, 'highlights': ['The importance of installing the Redux dev tools for Chrome and exploring the Redux tab in Chrome tools is emphasized. The speaker highly recommends installing the Redux dev tools for Chrome and mentions the visualization of the Redux store and all the states once the setup is completed.', 'Recommendation to install Redux and react-Redux packages, as well as Redux Thunk to enable synchronous requests from actions. The speaker recommends installing Redux, react-Redux, and Redux Thunk packages, highlighting the necessity of these packages for separate functionalities and their interconnection.', 'The process of creating a store, importing necessary components from Redux, defining initial state and middleware, and setting up the store is explained. The speaker explains the process of creating a store, importing components from Redux, defining initial state and middleware, and setting up the store, providing a step-by-step guide for the setup process.']}, {'end': 578.883, 'start': 344.67, 'title': 'Implementing redux with react', 'summary': 'Covers implementing redux with react, including creating a root reducer, connecting redux to react using a provider, and using the redux devtools extension for state management and action tracking.', 'duration': 234.213, 'highlights': ['Creating a root reducer as a meeting place for all other reducers The root reducer acts as a meeting place for all other reducers, such as leads reducer, auth reducer, and errors reducer.', 'Connecting Redux to React using a provider and wrapping it around the entire application The provider from React Redux is used to connect Redux to React, and it needs to be wrapped around the entire application, passing the store as a prop.', 'Using the Redux DevTools extension for state and action tracking The Redux DevTools extension is essential for managing state and tracking actions, providing visibility into the state and showing the differences when actions are triggered.']}], 'duration': 539.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ039826.jpg', 'highlights': ['The process of creating a store, importing necessary components from Redux, defining initial state and middleware, and setting up the store is explained.', 'Recommendation to install Redux and react-Redux packages, as well as Redux Thunk to enable synchronous requests from actions.', 'The importance of installing the Redux dev tools for Chrome and exploring the Redux tab in Chrome tools is emphasized.', 'Using the Redux DevTools extension for state and action tracking', 'Creating a root reducer as a meeting place for all other reducers', 'Connecting Redux to React using a provider and wrapping it around the entire application']}, {'end': 862.96, 'segs': [{'end': 611.048, 'src': 'embed', 'start': 580.104, 'weight': 1, 'content': [{'end': 587.686, 'text': "So let's go back to the reducer, the root reducer, which is where is it? I'm lost.", 'start': 580.104, 'duration': 7.582}, {'end': 591.887, 'text': "So index JS and we're going to import.", 'start': 588.286, 'duration': 3.601}, {'end': 601.039, 'text': "Let's see, we're going to have a leads reducer, we're going to have an auth reducer, stuff like that.", 'start': 594.333, 'duration': 6.706}, {'end': 602.761, 'text': "But we're not going to get into that till later.", 'start': 601.099, 'duration': 1.662}, {'end': 604.642, 'text': "Right now, we're just going to deal with leads.", 'start': 602.981, 'duration': 1.661}, {'end': 611.048, 'text': 'Actually, we just want to do leads from dot slash leads.', 'start': 605.243, 'duration': 5.805}], 'summary': 'Discussing root reducer in index.js, focusing on leads.', 'duration': 30.944, 'max_score': 580.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0580104.jpg'}, {'end': 720.771, 'src': 'embed', 'start': 643.092, 'weight': 0, 'content': [{'end': 645.135, 'text': 'OK, now a reducer is basically.', 'start': 643.092, 'duration': 2.043}, {'end': 654.747, 'text': "it's a function that takes in an action, where you basically evaluate an action and then you send down certain state,", 'start': 645.135, 'duration': 9.612}, {'end': 656.83, 'text': 'depending on what that action does.', 'start': 654.747, 'duration': 2.083}, {'end': 658.15, 'text': 'All right.', 'start': 657.81, 'duration': 0.34}, {'end': 665.033, 'text': "So for the leads, we're going to have, for instance, get leads, add lead, delete lead.", 'start': 658.27, 'duration': 6.763}, {'end': 668.795, 'text': 'And the way that we we define these is with something called types.', 'start': 665.053, 'duration': 3.742}, {'end': 673.557, 'text': "So I'm actually going to say import and we're going to bring in some types.", 'start': 669.615, 'duration': 3.942}, {'end': 675.597, 'text': "OK, actually, let's let's start.", 'start': 673.577, 'duration': 2.02}, {'end': 676.638, 'text': "Let's do one at a time.", 'start': 675.617, 'duration': 1.021}, {'end': 682.26, 'text': 'My first goal is to get the leads from the back end and display them here in the leads list component.', 'start': 676.938, 'duration': 5.322}, {'end': 685.662, 'text': "So let's start with get underscore leads.", 'start': 682.861, 'duration': 2.801}, {'end': 690.204, 'text': "And that's going to be from, and we're going to have a folder called actions.", 'start': 686.562, 'duration': 3.642}, {'end': 696.486, 'text': "So we'll go out of the reducers into actions and then a file called types.js.", 'start': 690.464, 'duration': 6.022}, {'end': 697.907, 'text': 'All right.', 'start': 697.627, 'duration': 0.28}, {'end': 700.688, 'text': "Now we don't have this file, so I'm going to go ahead and create it.", 'start': 698.027, 'duration': 2.661}, {'end': 705.03, 'text': "So in source, we're going to create a folder called actions.", 'start': 700.928, 'duration': 4.102}, {'end': 713.327, 'text': "And in actions, we're going to create a file called types.js.", 'start': 707.503, 'duration': 5.824}, {'end': 716.128, 'text': 'Now, types are basically just constants.', 'start': 713.447, 'duration': 2.681}, {'end': 720.771, 'text': "Okay, so it's just a constant that holds a string.", 'start': 716.148, 'duration': 4.623}], 'summary': 'Creating reducer functions for action evaluation and state management, with a focus on getting leads from the backend.', 'duration': 77.679, 'max_score': 643.092, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0643092.jpg'}, {'end': 773.546, 'src': 'embed', 'start': 748.324, 'weight': 5, 'content': [{'end': 754.286, 'text': "OK, so we'll say const initial state, which is going to be an object.", 'start': 748.324, 'duration': 5.962}, {'end': 756.387, 'text': "And we're going to have a leads array.", 'start': 754.306, 'duration': 2.081}, {'end': 761.802, 'text': 'OK And you can you can put whatever you want inside of your state.', 'start': 757.841, 'duration': 3.961}, {'end': 764.743, 'text': 'But all we really need is just these leads.', 'start': 762.202, 'duration': 2.541}, {'end': 770.005, 'text': "OK Because that's what we're fetching from our back end and that's what we want to put into this state.", 'start': 764.763, 'duration': 5.242}, {'end': 773.546, 'text': 'So down here we want to create a function.', 'start': 771.145, 'duration': 2.401}], 'summary': 'Creating initial state object with leads array for fetching data from backend.', 'duration': 25.222, 'max_score': 748.324, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0748324.jpg'}, {'end': 835.033, 'src': 'embed', 'start': 804.151, 'weight': 2, 'content': [{'end': 807.973, 'text': 'Okay, to get leads, add a lead, delete, and so on.', 'start': 804.151, 'duration': 3.822}, {'end': 812.395, 'text': "Now we have to evaluate the type, the action type that's sent.", 'start': 808.733, 'duration': 3.662}, {'end': 816.197, 'text': 'So we could use an if statement, but common convention is to use a switch.', 'start': 812.595, 'duration': 3.602}, {'end': 821.399, 'text': "So we'll say switch in this action object.", 'start': 818.078, 'duration': 3.321}, {'end': 822.74, 'text': "We're going to check for a type.", 'start': 821.419, 'duration': 1.321}, {'end': 829.829, 'text': "And we're going to create a case for a case for get leads.", 'start': 824.826, 'duration': 5.003}, {'end': 835.033, 'text': 'And then we need to decide what we want to return as state.', 'start': 831.65, 'duration': 3.383}], 'summary': 'To manage leads, evaluate action type using switch statement, for example: get leads.', 'duration': 30.882, 'max_score': 804.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0804151.jpg'}], 'start': 580.104, 'title': 'Reducing redux actions and types', 'summary': 'Covers creating a root reducer, defining a leads reducer, and evaluating actions to get, add, and delete leads, emphasizing the get_leads action. it also details the creation of a types.js file, setting initial state in the leads reducer, and using a switch statement to evaluate action types.', 'chapters': [{'end': 690.204, 'start': 580.104, 'title': 'Redux reducer and action creation', 'summary': 'Discusses creating a root reducer, defining a leads reducer, and importing and evaluating actions to get, add, and delete leads, with a focus on starting with the get_leads action.', 'duration': 110.1, 'highlights': ['Creating a root reducer and a leads reducer in the index.js and reducers/Leeds.js files', 'Explaining the concept of a reducer as a function that evaluates an action and modifies state', 'Defining actions such as get_leads, add_lead, and delete_lead using types and import statements']}, {'end': 862.96, 'start': 690.464, 'title': 'Redux actions and types', 'summary': 'Explains the creation of a types.js file to hold constants for actions, setting initial state in the leads reducer, and using a switch statement to evaluate action types in the reducer function.', 'duration': 172.496, 'highlights': ['The chapter explains the creation of a types.js file to hold constants for actions.', 'It details the process of setting initial state in the leads reducer.', 'The chapter explains using a switch statement to evaluate action types in the reducer function.']}], 'duration': 282.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0580104.jpg', 'highlights': ['Defining actions such as get_leads, add_lead, and delete_lead using types and import statements', 'Creating a root reducer and a leads reducer in the index.js and reducers/Leeds.js files', 'The chapter explains using a switch statement to evaluate action types in the reducer function', 'The chapter explains the creation of a types.js file to hold constants for actions', 'Explaining the concept of a reducer as a function that evaluates an action and modifies state', 'It details the process of setting initial state in the leads reducer']}, {'end': 1954.558, 'segs': [{'end': 938.02, 'src': 'embed', 'start': 883.394, 'weight': 6, 'content': [{'end': 890.8, 'text': "but when we create the actions and we dispatch to this file to this reducer, it'll make a little more sense.", 'start': 883.394, 'duration': 7.406}, {'end': 891.681, 'text': "so let's do that.", 'start': 890.8, 'duration': 0.881}, {'end': 893.142, 'text': 'and then we also need a default.', 'start': 891.681, 'duration': 1.461}, {'end': 899.979, 'text': "Let's see, we're going to say default and the default is just going to simply return the state.", 'start': 895.297, 'duration': 4.682}, {'end': 903.56, 'text': "All right, so we'll save that.", 'start': 899.999, 'duration': 3.561}, {'end': 907.922, 'text': 'Now we need an actions folder.', 'start': 905.681, 'duration': 2.241}, {'end': 911.283, 'text': 'We have an actions folder, but we need a leads action file.', 'start': 907.982, 'duration': 3.301}, {'end': 916.926, 'text': "So in actions alongside types.js, let's create a file called leads.js.", 'start': 911.864, 'duration': 5.062}, {'end': 919.635, 'text': 'All right.', 'start': 919.375, 'duration': 0.26}, {'end': 924.757, 'text': 'And any actions that we want to fire off are going to go in here.', 'start': 919.795, 'duration': 4.962}, {'end': 929.738, 'text': "And this is actually where we make we're going to make all of our HTTP requests.", 'start': 925.377, 'duration': 4.361}, {'end': 931.618, 'text': "I'm going to be using Axios.", 'start': 930.198, 'duration': 1.42}, {'end': 933.819, 'text': "But if you want to use the fetch API, that's fine.", 'start': 931.658, 'duration': 2.161}, {'end': 936.28, 'text': "If you want to use something, something else, that's fine as well.", 'start': 933.999, 'duration': 2.281}, {'end': 938.02, 'text': 'But in here.', 'start': 937.3, 'duration': 0.72}], 'summary': 'Creating a leads action file to make http requests using axios or fetch api.', 'duration': 54.626, 'max_score': 883.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0883394.jpg'}, {'end': 1112.822, 'src': 'embed', 'start': 1078.199, 'weight': 5, 'content': [{'end': 1084.303, 'text': 'Now, what we want to do is dispatch the get leads action to the reducer.', 'start': 1078.199, 'duration': 6.104}, {'end': 1091.928, 'text': 'So we take dispatch and we just pass in an object with a type.', 'start': 1084.544, 'duration': 7.384}, {'end': 1097.192, 'text': "OK, remember, in our reducer, we're evaluating the action type.", 'start': 1092.669, 'duration': 4.523}, {'end': 1099.774, 'text': 'OK, so we want to send a type of get leads.', 'start': 1097.212, 'duration': 2.562}, {'end': 1101.435, 'text': 'So it fires this off right here.', 'start': 1099.814, 'duration': 1.621}, {'end': 1112.822, 'text': "So let's say type get leads and then remember this the payload is going to be the leads that are returned from the server.", 'start': 1102.734, 'duration': 10.088}], 'summary': "Dispatch 'get leads' action to reducer with type and payload.", 'duration': 34.623, 'max_score': 1078.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ01078199.jpg'}, {'end': 1305.529, 'src': 'heatmap', 'start': 1243.175, 'weight': 4, 'content': [{'end': 1245.177, 'text': 'And we want the leads file.', 'start': 1243.175, 'duration': 2.002}, {'end': 1246.82, 'text': 'All right.', 'start': 1246.479, 'duration': 0.341}, {'end': 1261.38, 'text': 'Now down here whenever we use connect we actually need to export default connect and then we need to wrap the component name like that.', 'start': 1247.26, 'duration': 14.12}, {'end': 1262.541, 'text': 'All right.', 'start': 1261.4, 'duration': 1.141}, {'end': 1269.828, 'text': "Now not only I'm just trying to think of how to explain this.", 'start': 1263.242, 'duration': 6.586}, {'end': 1279.716, 'text': 'Not only do we need to connect to it, but we need to get the state and we need to be able to call this get leads method.', 'start': 1270.809, 'duration': 8.907}, {'end': 1289.843, 'text': "So I'm going to go right above here and I'm going to create a function, an arrow function called map state to props.", 'start': 1280.596, 'duration': 9.247}, {'end': 1292.926, 'text': 'And this takes a parameter of state.', 'start': 1290.924, 'duration': 2.002}, {'end': 1305.529, 'text': 'then we want to just pass in here leads and set that and go state dot leads, dot leads.', 'start': 1295.12, 'duration': 10.409}], 'summary': 'The transcript discusses using connect, map state to props, and the get leads method in a component.', 'duration': 34.72, 'max_score': 1243.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ01243175.jpg'}, {'end': 1526.959, 'src': 'heatmap', 'start': 1352.852, 'weight': 0.705, 'content': [{'end': 1358.94, 'text': 'So it might look a little funny that it says state.leads.leads, but what it means is the reducer.', 'start': 1352.852, 'duration': 6.088}, {'end': 1365.727, 'text': 'this right here, whatever this is, would be that first that first leads.', 'start': 1358.94, 'duration': 6.787}, {'end': 1375.115, 'text': 'if i called this lead reducer, then in our component it would be lead reducer, dot leads, all right.', 'start': 1365.727, 'duration': 9.388}, {'end': 1376.676, 'text': "so we're mapping it to the props.", 'start': 1375.115, 'duration': 1.561}, {'end': 1379.078, 'text': "now. that means we're going to have a prop called leads.", 'start': 1376.676, 'duration': 2.402}, {'end': 1381.2, 'text': 'so we need to add prop types.', 'start': 1379.078, 'duration': 2.122}, {'end': 1397.417, 'text': "so let's go up here and let's say static prop types, and it's just an object, and we'll say leads, which is going to be a going to say prop types,", 'start': 1381.2, 'duration': 16.217}, {'end': 1398.479, 'text': "and it's an array.", 'start': 1397.417, 'duration': 1.062}, {'end': 1401.063, 'text': "So we'll say array and it is required.", 'start': 1398.499, 'duration': 2.564}, {'end': 1407.094, 'text': "Now this map state to props it's not actually doing anything just yet.", 'start': 1402.972, 'duration': 4.122}, {'end': 1410.475, 'text': 'We need to pass it in to connect.', 'start': 1407.154, 'duration': 3.321}, {'end': 1422.221, 'text': 'So after connect we want to open up a set of curly curly set of parentheses and we want to pass pass in map state to props like that.', 'start': 1410.595, 'duration': 11.626}, {'end': 1423.421, 'text': 'All right.', 'start': 1423.181, 'duration': 0.24}, {'end': 1424.903, 'text': "So let's actually save this.", 'start': 1423.562, 'duration': 1.341}, {'end': 1428.887, 'text': "And with what we've done so far, let's see what happens.", 'start': 1425.784, 'duration': 3.103}, {'end': 1430.648, 'text': 'So if I reload.', 'start': 1429.487, 'duration': 1.161}, {'end': 1437.635, 'text': "OK, so nothing obviously nothing changes in the UI, but let's look at the state in the Redux tools.", 'start': 1430.669, 'duration': 6.966}, {'end': 1439.537, 'text': 'And you can see now we have this leads.', 'start': 1437.675, 'duration': 1.862}, {'end': 1442.08, 'text': "Now the leads, it's empty.", 'start': 1440.438, 'duration': 1.642}, {'end': 1443.361, 'text': "You can see it's an empty array.", 'start': 1442.1, 'duration': 1.261}, {'end': 1446.364, 'text': 'And you might be asking, well, you know, we made the request here.', 'start': 1443.401, 'duration': 2.963}, {'end': 1454.152, 'text': "Why? Why don't we have the leads from Django? And the reason for that is we created get leads, but we haven't called it yet.", 'start': 1446.464, 'duration': 7.688}, {'end': 1457.356, 'text': "So let's go back to the leads component.", 'start': 1454.853, 'duration': 2.503}, {'end': 1465.345, 'text': "And just like we mapped the state that's coming down from the reducer to props, we can also call these methods from props.", 'start': 1457.757, 'duration': 7.588}, {'end': 1468.108, 'text': 'But we have to add a second parameter in here.', 'start': 1465.806, 'duration': 2.302}, {'end': 1471.932, 'text': 'with an object with the method name, so getLeads.', 'start': 1468.829, 'duration': 3.103}, {'end': 1477.857, 'text': 'So now we have access to this.props.getLeads.', 'start': 1472.813, 'duration': 5.044}, {'end': 1481.781, 'text': 'And where we want to call that is when the component loads right?', 'start': 1478.458, 'duration': 3.323}, {'end': 1485.364, 'text': 'When the list loads or before it loads, when it mounts.', 'start': 1481.881, 'duration': 3.483}, {'end': 1489.087, 'text': 'we want to make that request or call that action.', 'start': 1485.364, 'duration': 3.723}, {'end': 1493.151, 'text': "So we're going to use componentDidMount.", 'start': 1489.248, 'duration': 3.903}, {'end': 1500.078, 'text': "And we're going to call this dot props dot get leads like that.", 'start': 1494.372, 'duration': 5.706}, {'end': 1503.082, 'text': "So let's save this and let's reload.", 'start': 1501.08, 'duration': 2.002}, {'end': 1509.369, 'text': 'And now if we look down in leads, you can see we have two items here.', 'start': 1503.582, 'duration': 5.787}, {'end': 1512.872, 'text': 'We have John Doe and we have Sam Smith.', 'start': 1509.409, 'duration': 3.463}, {'end': 1513.912, 'text': 'All right.', 'start': 1513.632, 'duration': 0.28}, {'end': 1523.077, 'text': 'So we successfully have called an action, made the request to our Django back end, got the leads and we put them in our state.', 'start': 1513.952, 'duration': 9.125}, {'end': 1525.038, 'text': "OK, now they're not showing up here.", 'start': 1523.517, 'duration': 1.521}, {'end': 1526.959, 'text': 'We have to do that within our render.', 'start': 1525.098, 'duration': 1.861}], 'summary': 'Mapped state to props, added prop types, connected to redux, and called action to fetch leads.', 'duration': 174.107, 'max_score': 1352.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ01352852.jpg'}, {'end': 1513.912, 'src': 'embed', 'start': 1481.881, 'weight': 3, 'content': [{'end': 1485.364, 'text': 'When the list loads or before it loads, when it mounts.', 'start': 1481.881, 'duration': 3.483}, {'end': 1489.087, 'text': 'we want to make that request or call that action.', 'start': 1485.364, 'duration': 3.723}, {'end': 1493.151, 'text': "So we're going to use componentDidMount.", 'start': 1489.248, 'duration': 3.903}, {'end': 1500.078, 'text': "And we're going to call this dot props dot get leads like that.", 'start': 1494.372, 'duration': 5.706}, {'end': 1503.082, 'text': "So let's save this and let's reload.", 'start': 1501.08, 'duration': 2.002}, {'end': 1509.369, 'text': 'And now if we look down in leads, you can see we have two items here.', 'start': 1503.582, 'duration': 5.787}, {'end': 1512.872, 'text': 'We have John Doe and we have Sam Smith.', 'start': 1509.409, 'duration': 3.463}, {'end': 1513.912, 'text': 'All right.', 'start': 1513.632, 'duration': 0.28}], 'summary': 'Using componentdidmount to fetch leads, resulting in 2 items: john doe and sam smith.', 'duration': 32.031, 'max_score': 1481.881, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ01481881.jpg'}, {'end': 1796.309, 'src': 'embed', 'start': 1727.613, 'weight': 0, 'content': [{'end': 1730.935, 'text': "So now we're actually pulling those leads from the server.", 'start': 1727.613, 'duration': 3.322}, {'end': 1741.229, 'text': "OK, if I were to go to postman, since I can't add them through the application yet, I can add them through here, though, if I say like Jane.", 'start': 1732.856, 'duration': 8.373}, {'end': 1753.759, 'text': 'Williams And we go ahead and send so that gets added to the server.', 'start': 1743.994, 'duration': 9.765}, {'end': 1757.882, 'text': "Now if I go back to react and reload there's Jane.", 'start': 1754.179, 'duration': 3.703}, {'end': 1763.967, 'text': 'Now I think in this video we can we can add the delete functionality as well.', 'start': 1758.463, 'duration': 5.504}, {'end': 1764.828, 'text': "So let's do that.", 'start': 1764.027, 'duration': 0.801}, {'end': 1768.271, 'text': 'Now in order to do that we need to add a new action.', 'start': 1765.709, 'duration': 2.562}, {'end': 1771.113, 'text': "So let's see.", 'start': 1770.012, 'duration': 1.101}, {'end': 1776.578, 'text': 'In addition to to get leads you want to do delete lead.', 'start': 1771.294, 'duration': 5.284}, {'end': 1783.605, 'text': 'So same thing.', 'start': 1782.805, 'duration': 0.8}, {'end': 1787.246, 'text': "I can actually copy this whole thing because it's pretty similar.", 'start': 1783.625, 'duration': 3.621}, {'end': 1791.868, 'text': "So we'll call this delete lead.", 'start': 1788.106, 'duration': 3.762}, {'end': 1794.828, 'text': "Okay Now we're going to need to know which one to delete.", 'start': 1791.888, 'duration': 2.94}, {'end': 1796.309, 'text': "So we'll put in an ID here.", 'start': 1794.868, 'duration': 1.441}], 'summary': 'Developing functionality to add and delete leads from the server in react application.', 'duration': 68.696, 'max_score': 1727.613, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ01727613.jpg'}, {'end': 1868.699, 'src': 'embed', 'start': 1830.07, 'weight': 1, 'content': [{'end': 1831.01, 'text': 'as the payload.', 'start': 1830.07, 'duration': 0.94}, {'end': 1834.072, 'text': "So I'm just going to pass I.D.", 'start': 1831.23, 'duration': 2.842}, {'end': 1836.552, 'text': "Now this delete Lee we haven't created a type for.", 'start': 1834.072, 'duration': 2.48}, {'end': 1846.196, 'text': "So let's go up here and bring in delete lead and let's go to our types file, which is in the actions folder types,", 'start': 1836.612, 'duration': 9.584}, {'end': 1847.917, 'text': "and we'll just go ahead and copy this down.", 'start': 1846.196, 'duration': 1.721}, {'end': 1852.412, 'text': 'Say delete lead.', 'start': 1851.391, 'duration': 1.021}, {'end': 1859.755, 'text': "OK, we'll save that.", 'start': 1852.432, 'duration': 7.323}, {'end': 1862.977, 'text': 'All right.', 'start': 1859.775, 'duration': 3.202}, {'end': 1865.238, 'text': "And we'll just keep the console log error for now.", 'start': 1863.077, 'duration': 2.161}, {'end': 1868.699, 'text': "So we'll save that now.", 'start': 1867.439, 'duration': 1.26}], 'summary': "Updating types file with 'delete lead' and saving changes.", 'duration': 38.629, 'max_score': 1830.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ01830070.jpg'}], 'start': 862.96, 'title': 'Integrating redux with ui', 'summary': 'Covers creating redux actions for making http requests, dispatching actions to the reducer, and integrating redux with ui to display and manage leads. it includes using axios for http requests, dispatching actions, and mapping state to props for accessing and manipulating data in react components.', 'chapters': [{'end': 1042.881, 'start': 862.96, 'title': 'Redux actions and http requests', 'summary': 'Discusses creating redux actions for making http requests using axios, setting up a default action, and importing types for action methods.', 'duration': 179.921, 'highlights': ["Creating Redux actions for making HTTP requests using Axios The transcript discusses creating a Redux action file for making HTTP requests using Axios, with mention of the import and usage of the 'get leads' action method.", 'Setting up a default action for Redux The chapter mentions setting up a default action that simply returns the state, which is essential for handling unspecified actions.', "Importing types for action methods The transcript discusses the import of the 'get leads' action type from 'types.js' for use in the Redux action file, indicating the importance of defining action types for consistency."]}, {'end': 1430.648, 'start': 1042.881, 'title': 'Redux action dispatching', 'summary': "Explains how to dispatch an action to the reducer using redux, including making a get request using axios, dispatching the 'get leads' action, using the connect function to work with redux in a component, and mapping the state to props for accessing leads data in a component.", 'duration': 387.767, 'highlights': ['The chapter explains how to dispatch an action to the reducer using Redux, including making a get request using Axios. Dispatching an action to the reducer using Redux, making a get request using Axios.', "Dispatching the 'get leads' action to the reducer by passing in an object with a type of 'get leads' and a payload with the response data from the server. Dispatching the 'get leads' action to the reducer, passing in an object with a type of 'get leads' and a payload with the response data from the server.", "Using the connect function to work with Redux in a component, including importing 'connect' from 'react-redux' and using prop types for accessing props in React. Using the connect function to work with Redux in a component, importing 'connect' from 'react-redux', using prop types for accessing props in React.", "Mapping the state to props for accessing leads data in a component, including creating a function called 'mapStateToProps' and passing it to 'connect'. Mapping the state to props for accessing leads data in a component, creating a function called 'mapStateToProps' and passing it to 'connect'."]}, {'end': 1727.533, 'start': 1430.669, 'title': 'Integrating redux with ui', 'summary': 'Discusses integrating redux with ui, demonstrating the process of making a request to the django backend, getting leads, and displaying them in the ui using react components and lifecycle methods. it also covers the mapping of state to props and calling methods from props.', 'duration': 296.864, 'highlights': ['Successfully calling an action, making a request to the Django backend, and getting the leads, which resulted in two items being displayed in the UI. Successfully retrieved and displayed two items (John Doe and Sam Smith) from the Django backend in the UI.', "Demonstration of mapping the state that's coming down from the reducer to props and calling methods from props using a second parameter with an object containing the method name. Explanation of mapping state to props and calling methods using a second parameter with an object containing the method name.", "Utilizing the lifecycle method 'componentDidMount' to make a request or call an action when the component loads, resulting in the call to 'this.props.getLeads'. Explanation of using 'componentDidMount' to call 'this.props.getLeads' when the component loads."]}, {'end': 1954.558, 'start': 1727.613, 'title': 'React lead management', 'summary': 'Covers adding and deleting leads in a react application, including adding a lead through postman, creating a delete lead action, dispatching the delete lead action to the reducer, and filtering and updating the state to reflect the deleted lead.', 'duration': 226.945, 'highlights': ['Adding a lead through Postman and validating its addition by reloading the React application. Demonstrating the process of adding a lead through Postman and validating its addition by reloading the React application.', 'Creating a new action to delete a lead and making a request to the API to delete the lead by ID. Detailing the process of creating a new action to delete a lead and making a request to the API to delete the lead by ID.', 'Dispatching the delete lead action to the reducer and updating the state by filtering out the deleted lead based on its ID. Explaining the dispatching of the delete lead action to the reducer and the subsequent update of the state by filtering out the deleted lead based on its ID.']}], 'duration': 1091.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ0862960.jpg', 'highlights': ['Successfully retrieved and displayed two items (John Doe and Sam Smith) from the Django backend in the UI.', 'Dispatching the delete lead action to the reducer and updating the state by filtering out the deleted lead based on its ID.', 'Creating a new action to delete a lead and making a request to the API to delete the lead by ID.', "Utilizing the lifecycle method 'componentDidMount' to make a request or call an action when the component loads, resulting in the call to 'this.props.getLeads'.", "Mapping the state to props for accessing leads data in a component, creating a function called 'mapStateToProps' and passing it to 'connect'.", "Dispatching the 'get leads' action to the reducer, passing in an object with a type of 'get leads' and a payload with the response data from the server.", "Creating Redux actions for making HTTP requests using Axios, with mention of the import and usage of the 'get leads' action method.", 'Setting up a default action for Redux that simply returns the state, which is essential for handling unspecified actions.']}, {'end': 2825.155, 'segs': [{'end': 1996.505, 'src': 'embed', 'start': 1954.598, 'weight': 1, 'content': [{'end': 1956.699, 'text': 'Right We want to call it when we click the button here.', 'start': 1954.598, 'duration': 2.101}, {'end': 1958.741, 'text': "So let's go back to our component.", 'start': 1957.14, 'duration': 1.601}, {'end': 1964.984, 'text': "And along with get leads, we're going to bring in delete lead and we have to add it down here.", 'start': 1959.401, 'duration': 5.583}, {'end': 1971.688, 'text': 'OK, so now we should have access to this dot props dot delete lead.', 'start': 1965.004, 'duration': 6.684}, {'end': 1977.332, 'text': 'Now, again, we want to call this when the when the button gets clicked.', 'start': 1972.229, 'duration': 5.103}, {'end': 1979.233, 'text': "So let's go.", 'start': 1978.172, 'duration': 1.061}, {'end': 1996.505, 'text': "right here on this button and let's add, let's say on click we want to call this dot props dot, delete lead and we need to send the id.", 'start': 1981.601, 'duration': 14.904}], 'summary': 'Integrating delete lead function to button click event in component.', 'duration': 41.907, 'max_score': 1954.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ01954598.jpg'}, {'end': 2044.03, 'src': 'embed', 'start': 2015.321, 'weight': 2, 'content': [{'end': 2018.583, 'text': 'And you can see that the actions that run show right here.', 'start': 2015.321, 'duration': 3.262}, {'end': 2025.868, 'text': 'when the page loads or when this component loads, it shows the get leads action because that runs in order to get these leads.', 'start': 2018.583, 'duration': 7.285}, {'end': 2027.97, 'text': "Now, let's go ahead and click one of these.", 'start': 2026.449, 'duration': 1.521}, {'end': 2031.644, 'text': 'And you can see that it disappears from the UI.', 'start': 2029.423, 'duration': 2.221}, {'end': 2033.845, 'text': 'It calls the delete lead action.', 'start': 2032.104, 'duration': 1.741}, {'end': 2040.628, 'text': 'And it shows us the diff, which is this lead has been deleted.', 'start': 2034.585, 'duration': 6.043}, {'end': 2044.03, 'text': 'And if we look at the state now, it only has one.', 'start': 2041.409, 'duration': 2.621}], 'summary': 'Component loads get leads action, delete lead action removes lead from ui and state.', 'duration': 28.709, 'max_score': 2015.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ02015321.jpg'}, {'end': 2202.4, 'src': 'embed', 'start': 2166.986, 'weight': 4, 'content': [{'end': 2168.347, 'text': 'So let me just do that real quick.', 'start': 2166.986, 'duration': 1.361}, {'end': 2178.736, 'text': 'So we have get leads, which is prop types dot funk dot is required.', 'start': 2168.948, 'duration': 9.788}, {'end': 2180.752, 'text': 'All right.', 'start': 2180.532, 'duration': 0.22}, {'end': 2182.013, 'text': "We'll just copy that down.", 'start': 2180.772, 'duration': 1.241}, {'end': 2185.175, 'text': 'And we also have delete lead.', 'start': 2183.634, 'duration': 1.541}, {'end': 2189.479, 'text': 'It still works without the prop types.', 'start': 2187.898, 'duration': 1.581}, {'end': 2190.6, 'text': "It's just good practice.", 'start': 2189.539, 'duration': 1.061}, {'end': 2192.221, 'text': 'All right.', 'start': 2191.941, 'duration': 0.28}, {'end': 2196.584, 'text': 'So back to the form component.', 'start': 2194.462, 'duration': 2.122}, {'end': 2202.4, 'text': 'We have our state now for the actual form.', 'start': 2197.935, 'duration': 4.465}], 'summary': 'Developing form component with get leads and delete lead functionalities.', 'duration': 35.414, 'max_score': 2166.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ02166986.jpg'}, {'end': 2236.916, 'src': 'heatmap', 'start': 2203.261, 'weight': 0.715, 'content': [{'end': 2207.726, 'text': "I'm just going to paste this in because I don't want to waste too much time just writing out markup.", 'start': 2203.261, 'duration': 4.465}, {'end': 2210.59, 'text': 'So let me just grab this real quick.', 'start': 2208.747, 'duration': 1.843}, {'end': 2217.628, 'text': "All right, so I'm going to just replace this div right here, and I'll just go over it.", 'start': 2213.226, 'duration': 4.402}, {'end': 2224.271, 'text': 'So basically, we have a containing div with a card, card body class, margin top, margin bottom.', 'start': 2218.548, 'duration': 5.723}, {'end': 2229.693, 'text': 'H2, we have a form that has an event, an onSubmit.', 'start': 2225.371, 'duration': 4.322}, {'end': 2231.794, 'text': "It's going to call this.onSubmit.", 'start': 2229.713, 'duration': 2.081}, {'end': 2236.916, 'text': 'And then we have each input that has a name.', 'start': 2232.555, 'duration': 4.361}], 'summary': 'Transcript describes updating a div and form with specific classes and attributes.', 'duration': 33.655, 'max_score': 2203.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ02203261.jpg'}, {'end': 2441.18, 'src': 'embed', 'start': 2397.993, 'weight': 5, 'content': [{'end': 2400.094, 'text': 'right?. We update, we add a lead here.', 'start': 2397.993, 'duration': 2.101}, {'end': 2411.322, 'text': "It should automatically reflect down here, okay? So let's see, where should we start? Let's start with, let's do the action.", 'start': 2400.214, 'duration': 11.108}, {'end': 2415.405, 'text': "So we'll go to our actions folder and then leads.js.", 'start': 2411.442, 'duration': 3.963}, {'end': 2417.887, 'text': "Let's have another type called add actions.", 'start': 2415.985, 'duration': 1.902}, {'end': 2422.891, 'text': 'And of course, we need to add that to our types.', 'start': 2419.509, 'duration': 3.382}, {'end': 2440.139, 'text': "OK, so bring that in and then let's create add lead.", 'start': 2422.911, 'duration': 17.228}, {'end': 2441.18, 'text': "I'm going to copy this.", 'start': 2440.179, 'duration': 1.001}], 'summary': 'Updating and adding a lead, creating a new type called add actions, and modifying the types in the actions folder.', 'duration': 43.187, 'max_score': 2397.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ02397993.jpg'}, {'end': 2663.636, 'src': 'embed', 'start': 2630.388, 'weight': 0, 'content': [{'end': 2632.929, 'text': "We're bringing in leads with this component.", 'start': 2630.388, 'duration': 2.541}, {'end': 2634.449, 'text': "We're simply calling the action.", 'start': 2632.949, 'duration': 1.5}, {'end': 2636.47, 'text': "We don't need to bring leads back in.", 'start': 2634.489, 'duration': 1.981}, {'end': 2642.332, 'text': 'So what we can do is put in null for map state to props.', 'start': 2637.13, 'duration': 5.202}, {'end': 2646.714, 'text': "However, we do need to add the method that we're going to call, which is add lead.", 'start': 2642.592, 'duration': 4.122}, {'end': 2648.674, 'text': 'All right.', 'start': 2646.734, 'duration': 1.94}, {'end': 2650.275, 'text': "So let's do that and then.", 'start': 2649.014, 'duration': 1.261}, {'end': 2654.994, 'text': 'where we want to call this is obviously in the onSubmit.', 'start': 2652.421, 'duration': 2.573}, {'end': 2663.636, 'text': 'Now before we call it we need to basically construct the lead which the values are the values are going to be in the state.', 'start': 2656.112, 'duration': 7.524}], 'summary': "Bringing in leads, adding 'add lead' method, and constructing lead on onsubmit", 'duration': 33.248, 'max_score': 2630.388, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ02630388.jpg'}], 'start': 1954.598, 'title': 'Form creation and redux action creation', 'summary': 'Discusses integrating lead deletion and creating an ad lead form with state management. it also covers the creation of a form component utilizing redux action creation, dispatching, and reducer updates for managing leads.', 'chapters': [{'end': 2166.946, 'start': 1954.598, 'title': 'Integrating lead deletion and form creation', 'summary': 'Discusses integrating the delete lead action in the component, demonstrating the successful removal of a lead and addressing the need to update the server delete request. it also introduces the process of creating an ad lead form with state management for name, email, and message inputs.', 'duration': 212.348, 'highlights': ['The component demonstrates the successful removal of a lead upon clicking the button, triggering the delete lead action and updating the UI accordingly. The delete lead action is successfully triggered upon clicking the button, resulting in the disappearance of the lead from the UI.', 'The chapter addresses the need to update the server delete request from a get request to Axios delete for a more effective lead deletion process. The need to change the server delete request from a get request to Axios delete is acknowledged to ensure the effective deletion of a lead.', 'The process of creating an ad lead form is introduced, emphasizing the importance of managing the state of name, email, and message inputs within the component. The introduction of creating an ad lead form is emphasized, highlighting the necessity of managing the state of name, email, and message inputs within the component.']}, {'end': 2825.155, 'start': 2166.986, 'title': 'Redux form component and action creation', 'summary': 'Covers the creation of a form component with event handling, state management, and submission to update the server, utilizing redux action creation, dispatching, and reducer updates for managing leads, with a plan to handle errors and messages in the next video.', 'duration': 658.169, 'highlights': ['The chapter covers the creation of a form component with event handling, state management, and submission to update the server The form component is created, with event handling and state management, enabling submission to update the server.', 'Utilizing Redux action creation, dispatching, and reducer updates for managing leads Redux action is created for adding a lead, which dispatches a post request to the server and updates the reducer with the new lead.', 'Plan to handle errors and messages in the next video Future plan involves creating an errors reducer and alerts component to handle errors and messages for a better application experience.']}], 'duration': 870.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/BmL8iaLMnQ0/pics/BmL8iaLMnQ01954598.jpg', 'highlights': ['The component demonstrates the successful removal of a lead upon clicking the button, triggering the delete lead action and updating the UI accordingly.', 'The chapter addresses the need to update the server delete request from a get request to Axios delete for a more effective lead deletion process.', 'The process of creating an ad lead form is introduced, emphasizing the importance of managing the state of name, email, and message inputs within the component.', 'The chapter covers the creation of a form component with event handling, state management, and submission to update the server.', 'Utilizing Redux action creation, dispatching, and reducer updates for managing leads.', 'Plan to handle errors and messages in the next video.']}], 'highlights': ['Redux facilitates authentication management and user data within the Django front end app.', 'Installing Redux and react-Redux packages, as well as Redux Thunk, is recommended for enabling synchronous requests from actions.', 'Creating a root reducer as a meeting place for all other reducers.', 'Defining actions such as get_leads, add_lead, and delete_lead using types and import statements.', 'Successfully retrieved and displayed items from the Django backend in the UI.', "Utilizing the lifecycle method 'componentDidMount' to make a request or call an action when the component loads.", 'Creating Redux actions for making HTTP requests using Axios.', 'The component demonstrates the successful removal of a lead upon clicking the button, triggering the delete lead action and updating the UI accordingly.', 'The process of creating an ad lead form is introduced, emphasizing the importance of managing the state of name, email, and message inputs within the component.']}