Lesson 03
Installing Redux - Intro to Redux Saga
Summary
Summary of Transcript
In this tutorial, the instructor demonstrates how to set up a React application with Redux. Here’s a concise breakdown of the key steps and concepts discussed:
1. Modify Source Code
- Open the text editor and simplify the app's source code.
- Remove unnecessary files (like
app.cs
) and retain only essential imports. - Modify the
render
method to return a simple<div>
for visibility.
2. Setup index.js
- Keep important imports like React and
react-dom
. - Ensure the app is rendered into the DOM element with the ID
root
.
3. Install Redux
- Use npm command to install Redux:
npm install redux
- Discuss the need for setting up Redux store with reducers and how Redux connects to the React application.
4. Create Redux Store
- Import
createStore
from Redux. - Define a simple reducer that takes
state
andaction
, and returns the current state. - Create the store and assign it to a variable.
5. Use React Redux
- Install
react-redux
to bridge React and Redux:npm install react-redux
- Import the
Provider
component fromreact-redux
. - Wrap the application component in the
Provider
and pass the store as a prop.
6. Confirm Setup
- Open the browser to ensure the application loads correctly.
- Use the console to log props in the App component and prepare for using the
connect
function fromreact-redux
in future lessons.
Conclusion
- The session reviewed how to set up a React app with Redux, focusing primarily on store creation and using the
Provider
to connect the Redux store to the application. - Future lessons will delve into how to use the
connect
function to interact with the Redux state and dispatch actions.
This summary encapsulates the core aspects of the transcript while providing a clear outline for anyone looking to grasp how to integrate Redux into a React application.
Video Transcript
Welcome back. So we got our app running. Now let's change some source code. Let's go back
to the text editor and then let's get rid of all the stuff that we don't need. So you
can delete the files like app.cs or whatever. You can delete the files or not or keep them.
What I'm going to do is just for the render function, render method of the app, I'm just
going to return just a simple div. I'm going to delete everything inside. All right. I
don't care about the class name. I just want to do right here. I'm going to type for it
at least so there's something there we can see. I don't care about the logo. I don't
care about CSS. But if you want to leave it there, it's okay. Just leave the import react.
We're going to need JSX and then the component to create a react component from react. That's
all we need. Define a react component class component extends component with the render
method that returns the template to that component. Okay, we got everything. Now let's go back
to index.js. There's a lot of stuff here. I don't care about this. But if you want to
leave it, let's just leave it there. We don't care about CSS here, but if you want to leave
it there, let's point. Let's leave it like this. We need react. Definitely need it because
we're doing JSX. We need the react DOM because we need to inject it into the DOM. Inject
the app if you want to leave the index.css. We free do so. I don't really care that we
for sure need to import app. And then there's this thing service worker if you want to have
to work rough line load faster blah blah blah if you want to leave it just leave it. Anyways,
you guys this react DOM render so it's going to grab the div or the element that has the
ID root in the HTML and replay and inject the react app there. Okay, so we're good here.
Now let's hook up Redux. So we're going to have to install some packages to do that.
So let's go here. I'm in the terminal. I'm going to go to a new tab in the project directory
for it's saga. I just cleared the screen of the command clear. So we're going to need
to Redux, right? So let's install it. npm install. Used to be that we need a dash dash
say we don't need it anymore. If you're using node I think since six. So I'm just going
to leave it out. But if you're not sure, just leave it. So we're going to do Redux. Okay,
the install Redux. Gonna take some time. So what we're going to do is I'm just going to
explain what we're going to do next. While it's installing, we're going to hook up create
the store with the reducers. Okay. And then we're going to inject that into the react
application, we're going to need later react Redux. But for the time being, let's just
go back to the code. I am index.js. So we're going to do first create the store. So running
port, create store from Redux. Okay, so we're going to need the function here creates start
from Redux. Okay. Now right here, after the imports, we're going to call create store.
Now create story needs the reducer. So we just could be it's just a simple function, right?
That the arguments is the state and the action. Right? So I can just write a simple reducer
right here. Also reducer is a function that takes state in an action. And you always return
a state, the new state, we can just return state for now. You don't really care about
the action yet. So this is the same simple reducer that just returns the state as is
without any changes. I can pass that to create store, right? That's the one way to create
a store. Now that's all good, we can assign this to a variable called this store. Then
now we have to somehow inject the store, make it available to the application. How can we
do that? What made to do that is using a knowledge or library called react Redux, react Redux
is like the bond, like you can bond bond between react and Redux. So there's a component there
called provider. It's a higher order component that you can use here to inject the store
into your application. So let's do that. Going back to the terminal, we are going to npm
install, react Redux npm install react dash Redux. So this guy has the provider higher
order component that will allow us to inject the store to our application. So it's going
to take a while here to install it. So app is going to go under the provider. Okay, we're
good. React Redux version 5.0.7. Going back to the source code. What we're going to do
is the following. Let's go up there. I'm going to import provider. Don't forget the braces.
All right. React Redux. So provider for react Redux. It's the higher order component that
we're going to wrap around the app right here. Right where you have a react down that
render, we're going to take this guy here. Let me break it into multiple lines. I'm going
to make a provider and wrap it around the app component. Okay, you can make it multiple
lines if you want. Now provider takes a prop and that's called store. So you can just pass
the store that you created here as the store prop. Let's do it. Good. Now let's save it.
Now we're not going to notice anything happening in the browser if you go there. Let's go to
the browser. You just get the fruit list, right? You see it automatically reloaded the app
because we're using create react app and it does all this nice stuff for us already. It's
probably using react web backdab server or some sort. Anyway, you don't notice anything,
but let's open a console here. I just want to open the console web console. Okay. To see some
stuff. Let me put the console dock to bottom. So the console is the bottom of the page. There's
nothing. So what we want to do is console log the props in the app component to see what's going
on there. So let's see. Actually, a little bit don't be anything, right? Because we just have
the store and in order for our app to be able to emit actions, we have to use the helper called
connect, right? From react redux. That's another helper from react redux called connect that we're
going to do to be able to access the state or to dispatch actions. Anyway, I think we're good for
this lesson. Let's just review what we did. So we started hooking up redux. And what we did was
the following. First, we need to create a store. So create stores from the redux package. So create
store requires a reducer. We just created for time being a simple reducer. It's just a function
that takes two parameters, the state and the action and returns a new state usually, we'll just return
the state the previous as this without any modifications. So create that store, right? But
how can we inject the store make it available to the app? Well, not make available but inject it
and somehow look it up. We use the provider hierarchy component from the react redux package.
All it takes is a prop called store with your store. That's it. And then you wrap around your
application component, you're good to go. Now the next steps will be in the next lessons,
we're going to learn how to use a connect from the react redux to be able to access the state and
to emit or dispatch actions. All right, so see you then.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: