Monday, 11 January, 2021 UTC


Summary

This lesson shows you how to install `redux` and `react-redux` to create a redux store and then use the [Provider](https://react-redux.js.org/api/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](https://redux.js.org/api/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). 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](https://redux.js.org/style-guide/style-guide#reducers-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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/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 `` component to pass that store down to each component. More info about Provider can be found here: https://react-redux.js.org/api/provider