• Students will learn to use redux with react
• Students will learn to design redux reducer's for controlling application state
• Students will learn to design action creator functions for working with redux

• Read redux readme
• Read redux motivation
• Read redux core concepts
• Read redux three principles
• Read redux actions
• Read redux reducers
• Read redux store
• Read redux usage with react

Redux is a state container for Javascript applications. It can be used to manage the state of any JS program, not just react apps. Redux holds the whole state of your application within a single store. The redux store becomes the "single source of truth" for all application state. Some developers go as far as to store all state (application state and view state) on the store. a Redux store is read only, much like a React component's state or props. Changes to a store are made with pure functions called reducers.

A redux store is created by passing a function called a reducer into createStore. A redux reducer's job is to both define the state of the application and the changes that can be made to that state. Redux reducers have the function signature (state, action) => newState. The reducer will be called each time an action is dispatched and what ever state it returns will be the new state of the store.

A redux store has three methods getState, dispatch, and subscribe

Each time dispatch is invoked, it's first argument is passed into the reducers action parameter. In order to update the store, you must organize your reducer in a way that enables meaningful changes based on values that are dispatched. The most common pattern for dispatching meaningful changes to reducers is by always dispatching objects that have a type and payload. The reducer can then make decisions of what to do with the payload based on the type property of the action dispatched.

// example dispatch usage
store.dispatch({
  type: 'CREATE_NOTE',
  payload: {id: 'abc123', content: 'hello world'},
})

People often create helper functions called "action creators" that create action objects to be dispatched...

// an action creator for creating notes
const createNote = (note) => ({ type: 'CREATE_NOTE', payload: note })

dispatch(createNote({id: '123456', content: 'hello again, world'}))

Invoking store.getState() returns the current state of the store.

Subscribe allows you to register change listener functions that will be called each time the store is dispatched.

// log the new state after each dispatch
store.subscribe(() => {
  console.log('___STATE___', store.getState())
})

react-redux is the official redux bindings for react. It is a set of tools that simplify creating react component's that are able to interact with a redux store.

Provider is a react component that makes the redux store available to connect() calls in the component hierarchy. You will wrap the provider around the rest of your application.

The connect function connects a react component to the redux store added to your app's Provider component. connect uses mapStateToProps and mapDispatchToProps to create a higher order function used to wrap a react component.

mapStateToProps is a function that allows you to assign the store's state or parts of the store's state to props of a component.

mapDispatchToProps is a function that allows you to assign methods to a component's props that have access to the store's dispatch method.