React & Redux Terminology

Here is a helpful list of React and Redux Terminology that will be helpful for students and developers alike.

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

Creates a Redux store that holds the complete state tree of your app

Store

Contains all of our reducers and all of the state of our application

The store is passed in as a prop to the Provider

State

The state object is where you store property values that belong to the component.

When the state object changes, the component re-renders.

dispatch(action)

Dispatches an action. It’s the only way to trigger a state change.

The store’s reducing function will be called with the current getState() result and the given action synchronously.

Reducer

A reducer is a function that accepts an accumulation and a value and returns a new accumulation. They are used to reduce a collection of values down to a single value.

combineReducers(reducers)

Turns an object whose values are different reducing functions into a single reducing function that you can pass to createStore. The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers.

rootReducer = combineReducers(reducers)

We usually store the return value of combine reducers as a rootReducer constant.

We pass the rootReducer as a first argument to createStore.

Thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action.

Thunk can be used to delay the dispatch of an action, or to display only if a certain condition is met.

mapStateToProps(state, ownProps)

Used for selecting part of the data from the store that the connected component needs. Receives the entire store state, and should return an object of data this component needs. Each field in the returned object will become a prop for the actual component.

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

mapDispatchToProps(dispatch, ownProps)

As a function it gives you the most flexibility in customizing functions your component receives, and how they dispatch actions. You gain access to dispatch and ownProps.

Provider

Makes the Redux Store available to the rest of your app.

Provider is rendered above App in the hierarchy. Implemented by React Redux

Provider is providing all of the information to all of the components in our app.

connect(mapStateToProps, mapDispatchToProps, mergeProps?, options?)

The connect function connects a React Component to a Store.

Provides it’s connected component with pieces of data it needs from the store, and functions it can use to dispatch actions to the store. Implemented by React Redux. Communicates via the context system.

getState()

Returns the current state of your application

setState(updater, [callback])

A request rather than an immediate command to update the component.

Async Method. Does not return a promise.

ActiveStorage

Allows us to easily handle file uploads either to the cloud or locally.

ActiveStorage Blob

A blob is a record that contains the metadata about a file and a key for where that file resides on the service