Add Redux to an Existing React Application
This lesson shows you how to install redux and react-redux to create a redux store and then use the Provider component to enable redux throughout your entire application.
First we start by installing redux and react-redux using:
yarn add redux react-redux
Then we use the createStore method in redux to keep a place to store our data.
import { createStore } from "redux";
export const store = createStore(reducer);
After that we create a reducer function. Reducer functions are similar to the Array prototype's reduce method.
The first argument could be considered the previous state of the world and the second argument is the current action being applied.
function reducer(state, action) {
return state;
}
Reducers absolutely must not have side effects and should never change the previous state. Instead in reducers it's common to see the pattern of using object spread syntax to make a copy of the current state into a new object, before modifying any properties:
return { ...state, changedProperty: "value" }
Once a redux store is created we use the <Provider> component to pass that store down to each component. More info about Provider can be found here: https://react-redux.js.org/api/provider
Instructor: [0:00] In a terminal window type yarn add redux react-redux, and then create a file in your src folder called store.js. At the top of the file type import { createStore } from "redux" and export a constant called store. Type export const store = createStore, and that takes a single argument called reducer.
[0:22] Reducer functions are key to Redux. Let's create a simple one here. Type function reducer. That takes two arguments, state and action. For now, we're simply going to return the state.
[0:33] The reducer function is similar to array's reduce function, where the state represents the previous state of the world and the action represents the current action being processed. The reducer always returns a new state or the old state. It never modifies the state.
[0:51] In order for our reducer to be at least somewhat useful, we need to provide it with some initial state. To do that we'll create a variable called initialState and we'll give it two things -- an amount, for now we'll just say like $12, and a currencyCode, which we'll set as USD.
[1:07] To use the initialState, we can say state = initialState. That way, when the reducer function is called, if there's no existing state, it will seed it with this initialState that we've created. For now, our state's going to have an amount of 12 and currencyCode of USD.
[1:22] Now that we have our Redux store set up, we need to tell our application about it. Over in index.js, type import { Provider } from "react-redux" and import { store } from "./store". Then we're going to wrap our exchangeRate component in a Provider component. Type Provider store = { store } and put exchangeRate inside of that.
[1:42] Now, all of the components inside of our application have access to our Redux.