To set up Redux, I'll follow the same approach as I did earlier in the course,
I'll add a store folder and in there, I'll have my places-action.js file and my places-reducer.js
file.
That's of course a bit different than before,
there I had an actions and a reducers subfolder,
you can absolutely do the same here,
since I have only one action and one reducer though, I'll keep this in two files
but you could have subfolders and so on,
that's totally up to you. Now in the places reducer, I'll define how my state should look like for this
part of my total state and that will be very simple,
my initial state here is just a Javascript object where I want to have a places key which is empty, an
empty array at the beginning because I'll have an array of places and that's it.
So therefore here, I can export this reducer function which takes a state that is set to the initial
state
if no other state is passed in and an action and in there for now, I'll just return that state, soon of
course we'll add logic to handle different actions and for example, add a new place. In the places actions
file, I'll export a new constant, add place, which is one action identifier I'll need and I'll add an action
creator function, add place, which should take some data about the place and for the moment, that's just
the title, later that will be more
and here I want to return my action object
then where the type is add place and where I then just have my place data let's say which at the moment
of course is only made up of the title but later again, that will be more.
That's the basic Redux app, now of course in app.js
we need to wire everything up. So in there as you learned it in this course, we can import something from
Redux and also something from React Redux and also import Redux Thunk from Redux Thunk,
so from this package we also installed. Now from Redux,
we need create store and combine reducers and also apply middleware to apply Redux Thunk and from
React Redux, we need that provider component
and with that, just as we did it multiple times in the course, we can create our root reducer with the
help of combine reducers.
This takes an object where we merge all reducers together,
now obviously we only have one reducer here and that's the places reducer which we import from the store
folder and there, it's the places reducer file
but of course you could have more reducers in your app and I'll map this to places, so the places reducer
is mapped to the places identifier here.
Now with that, we can create our store with the create store function and this function takes the root
reducer and we can also pass in a second argument where we call apply middleware and pass Redux Thunk
to that function so that the Redux Thunk package is kind of plugged into our Redux flow here. With all
of that set up, we can wrap our places navigator with the provider component because every screen in our
app, in our navigator, should have access to the store and to provider, we pass the store through the store
prop and that's the Redux setup we also saw multiple times throughout this course. With Redux set up, we can go
to the new place screen and make sure that here in the save place handler which is triggered when we
click this button, we do actually add a new place which for the moment only consists of its title but
of course, that will change throughout this course. To do that, we can import use dispatch from React Redux
and simply get access to the dispatch function by executing use dispatch up there and also of course
import our action, for example again with using this import merging syntax here, with import everything
as places actions from the store and there, the places actions file and with that, we can go to save
place handler, call dispatch here and dispatch places actions add place and forward the title which
is of course stored in our title value, so in this here. Now with that, we'll be able to dispatch this
action, in the places reducer,
we can now switch our action type or use if checks of course and look for the add place state or action
which we import from places actions, also add the default case by the way where we just
return the state and therefore we can get rid of this return statement down there and now if add place
is what we got,
well then we can create a new place here and for that, also just as before in this course, I'll add
a models folder with a place.js file in there where I want to define how a place should look like
in this application, simply just to have an easy way of creating new place objects that are always the
same.
So here, I'll create a class and export this as the file default and now of course it's up to you how
you want your place to look like, I'll define mine with the help of the constructor to have an ID
and a title
and later we'll add more
but for now, that's it
and I'll store my ID here and I store my title here in a property. With that we have a blueprint for
new places, back in the places reducer,
we can now use that.
So there we can import place from the models folder and there, the place.js file and then here, create
a new place by calling new place,
so by initializing or by instantiating a new place based on our class and for the ID, I'll for the moment
use a dummy ID of the current date timestamp and the title however is of course something we can set
because that's part of our action, there in the place data we'll have a title property which holds the
title the user set,
so here I can set this to action.placeData.title.
This creates a new place object
and now we can return a new state here where places and I don't need to copy the old state because I
have nothing else in my state here and I won't add anything so I can just return a brand new state object,
where places is now state.places.concat,
so that takes the old array, adds a new item and returns a brand new array which replaces the old the
array here in our state
and I concat my new place of course. With that, we should have a list of places which we manage. In
the next lecture,
we can now worry about outputting this here on the place list screen. Just one other thing, when we add
a new place here by clicking the save place handler,
I also want to go back to the places list screen, so here
after dispatching this action, I'll actually use props navigation to go back, so to go back to the place
list screen. And now let's work on that places list screen and let's make sure we do actually output
a list of places there.