Getting Started with Redux by Dan Abramov Notes

index.md

Redux Course

https://egghead.io/courses/getting-started-with-redux

Principles

1. Single source of truth
   • Describe the state of the entire app in the state
2. State is read-only
   • The state tree is redundant. You cannot modify it. Everytime you want to change the state, you dispatch an action.
3. Changes are made with pure functions

Flash cards

• What is the redux store?

  The minimal representation of data in the app. A JavaScript object describing everything that can change in your app, including data, and UI changes.

• What is an action?

  A JavaScript object describing a state change. A minimal representation of the state change.

• What is a reducer?

  A pure function that takes the previous state, the action, and returns the next state.

• What is an action creator?

  A function that returns an action

• What is middleware?

  Code you can put between the framework receiving a request and the framework generating a response

• What should the reducer do if it receives an action it doesn't understand?

  Return the state unchanged.

• What should the reducer do if it receives a state of undefined?

  Return the initial state.

• How do you bring in redux?

  import {createStore} from 'redux'

• What are the arguments of createStore?

  reducer, [preloadedState], [enhancer]

• What does createStore return?

  The store.

• What are the 3 most important methods of the store?

  • getState
  • dispatch
  • subscribe

• What does getState do?

  Returns the state.

• What does dispatch do?

  Dispatches an action.

• What does subscribe do?

  Takes a callback that gets called anytime an action is dispatched.

• What is the difference between splice and slice?

  splice mutates the array.

• What does combineReducers do?

  Creates a single reducer from multiple reducers. It takes an object that maps from the part of the state to the reducer for that part of the state.

• What property does an action need?

  type

• How do you use Redux middleware?

  Pass applyMiddleware as the enhancer to createStore.

  import {createStore, applyMiddleware} from 'redux'
  
  createStore(reducer, applyMiddleware(middleware1 [,middleware2, etc...]))

• How can you apply multiple store enhancers to the redux store?

  Use compose()

• What does Redux middleware run?

• What are the 3 main things you can import from redux?

  • createStore
  • combineReducers
  • applyMiddleware

• How do you add the store to the context with react-redux?

  Wrap the entire app with the Provider component and pass it the store prop.

• How do you access the store with react-redux?

  Export a presentational component wrapped in connect.

  Example: export default connect()(PresentationalComponent);

• What does connect return?

  A function that accepts a presentational component and returns a container component.

• What is a container component?

  A component that is subscribed to the store.

• What are the arguments to connect?

  mapStateToProps, and mapDispatchToProps

• What mapStateToProps?

  A function that returns an object.

  The keys are the props, and the values are the values.

• What are the arguments passed to mapStateToProps?

  state, props

• What is mapDispatchToProps?

  A function that returns an object.

  The keys are the props, and the values are the values.