Monday, 11 January, 2021 UTC


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 `` component to pass that store down to each component. More info about Provider can be found here: