Redux

Store

An object that holds the complete state of your app. The only way to change its state is by dispatching actions. You may also subscribe to the changes to its state to update the UI.

createStore(reducer, [preloadedState], [enhancer]) (link)

Creates a Redux store that holds the complete state tree of your app. There should only be a single store in your app.

Initializing State (#)

In general, preloadedState wins over the state specified by the reducer. This lets reducers specify initial data that makes sense to them as default arguments

combineReducers (#)

The most common state shape for a Redux app is a plain Javascript object containing "slices" of domain-specific data at each top-level key. Similarly, the most common approach to writing reducer logic for that state shape is to have "slice reducer" functions, each with the same (state, action) signature, and each responsible for managing all updates to that specific slice of state. Multiple slice reducers can respond to the same action, independently update their own slice as needed, and the updated slices are combined into the new state object.

combineReducers takes an object full of slice reducer functions, and returns a new reducer function.

Reducers

Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes.

Connect

mapStateToProps (#)

mapStateToProps is used for selecting the part of the data from the store that the connected component needs. It’s frequently referred to as just mapState for short.

• It is called every time the store state changes.

• It receives the entire store state, and should return an object of data this component needs.

Your mapStateToProps function should return a plain object that contains the data the component needs:

• Each field in the object will become a prop for your actual component

• The values in the fields will be used to determine if your component needs to re-render

function mapStateToProps(state) {
  return {
    a: 42,
    todos: state.todos,
    filter: state.visibilityFilter
  }
}

// component will receive: props.a, props.todos, and props.filter

mapDispatchToProps (#)

As the second argument passed in to connect, mapDispatchToProps is used for dispatching actions to the store. dispatch is a function of the Redux store. You call store.dispatch to dispatch an action. This is the only way to trigger a state change.