2.8 Application State With Redux

Hi, and welcome back to Get Started with React Native. In this lesson, I'm giving you an intro to Redux, which allows you to manage your application state. Redux is a powerful library and might seem scary at first. Because it talks about stores, reduces, and actions in its documentation. But it's actually really simple. It has a model that contains your application state, like a plain JavaScript object. To change it, you define actions that let you define what can be changed. Finally, a reducer ties state and actions together. There are also three core principles that you need to be aware of. There is only a single source of truth, which is a single store. State is read-only. The only way to change state is to dispatch an action. Changes are made with pure functions. Those are the reducers that allow changing state. They take the previous state and an action and return the new state. To complete the use Redux, you need a bit more information. But I'm going to explain this as we go along, since it's easier that way. Let's jump right into the core'a project to try it out. It really much easier to understand with a real project. First of all, let's install redux and react redux with the yarn. The first order of business is, of course, to import any dependencies. In our case, we need to createStore from redux and Provider form react-redux. Now that's done, we can create a store. This argument takes some reducers, but since we don't have any yet, I'm going to supply an empty function. In our render function, we need to wrap everything in the provider component. Pass in to store, this allows us to access the store and all child components. Okay, great, let's create a reducer. I'm going to do that in a new file. The reducer will have an initialState, which is the distance, speed, and bearing set to empty values. Then we need a reducer function. The name is completely up to you. Just make sure that the first parameter defaults to the initialState. And the second, the actions, to an empty array. Now we can switch between action types. You can define them as constants in a separate file. But for us, it's easier to just type them as strings. First we have an action that will increment the distance. It will return the rest of the state, but change the distance to add the one we passed in. Actions just need a type. Every other parameter is up to you. For the speed, we want the type to be SET_SPEED. Here, we just change the speed again. For the bearing, we can use all the code from the constructor, where we calculate the bearing and move it here. Then we just set the bearing on the state. It's important to have a default case that returns the unchanged state. And this will be called initially. While we're at it, let's also create the actions we just handled in an actions file. They are just functions that get exported, taking your chosen parameters. In our case, I'm just returning a hash that has a type key and the passed in parameter, Really easy. Back in the index file, we can import the reducer, as well as the individual functions. Instead of the empty function we passed to create store, we can now use reducer. Finally, we need to change the constructor and clean it up to use the actions we just created. Instead of setting the distance on the run in for component, we can now just calculate the last distance and call store.dispatch, incrementDistance, and pass it here. The same goes for setSpeed and setBearing where we passed the heading. This is much cleaner now. The final step is to use it. In run info, remove the default from the export statement, and import connect from react-redux. At the bottom, add export default and a call to connect, which gets a call back function that receives the state and the components on props. Here, we need to return the new props for the component. Since ours is dynamic, I'm going to access the value by another prop called type that we can set to the state key and the index file. This will involve the call back whenever the state changes. Since connect returns a function, we need to call it and pass our component class as a parameter. Now that we've done that, we can change this.state.value to this.props.value. The same has to be done for RunInfoNumeric. Here, we also need to add curly braces around run-info since we want an unconnected component to extend from. In the index file, we can make the last necessary change. We have to add type to RunInfo and RunInfoNumeric. All done, the values get updated automatically when the application changes. To recap, Redux lets you mange application state. It has one store, the rest a single source of truth. You tie actions and state together with a reducer. To connect the component with the store, use React Redux Provider and connect functions.