There can only be “One Single Source Of Truth”#406

Discuss in words something you learned in class today or this week.

-Connect: Extracting Data with mapStateToProps

-As the first argument passed in to connect, 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.

Defining mapStateToProps

-mapStateToProps should be defined as a function:

function mapStateToProps(state, ownProps?)Copy

-It should take a first argument called state, optionally a second argument called ownProps, and return a plain object containing the data that the connected component needs.

-This function should be passed as the first argument to connect, and will be called every time when the Redux store state changes. If you do not wish to subscribe to the store, pass null or undefined to connect in place of mapStateToProps.

Return

-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

-For example:

function mapStateToProps(state) {
  return {
    a: 42,
    todos: state.todos,
    filter: state.visibilityFilter
  }
}// component will receive: props.a, props.todos, and props.filter

What are “actions” in Redux?

-Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

What is the role of reducers in Redux?

-A reducer is a function that determines changes to an application’s state. It uses the action it receives to determine this change.

What is the meaning of “single source of truth” in Redux?

-In React-Redux applications, when your Redux is a single source of truth, it means that the only way to change your data in UI is to dispatch redux action which will change state within redux reducer. A practical example would be that you have Redux store which contains items you want to display.

Explain the components of Redux.

-We classify components into four categories when building our apps:

1. Higher Order Components (decorators): things such as Redux’ @connect or redux-ui's @ui
2. Reusable components: things such as SeatGeek’s infinite scroll or an abstract pagination component
3. Functional components: small, undecorated dumb components written as functions (see here for more info)
4. Standard components: any other component that doesn’t fit the above. Typically custom for your app

-Higher order components are decorators that add powerful functionality to your standard components. These do things like connect to Redux’ state store to automatically pass down props (@connect), set up UI state for a component and pass down props (@ui), or create a form with any validation (@reduxForm).

-A general rule of thumb is that a component should be higher order if it:

• Doesn’t render directly to the DOM
• Passes down props to a standard component you’re defining
• Hooks into react lifecycles to manage, manipulate, or improve a standard component

-Reusable components are different from higher-order components in that these are standard components that you add as JSX to render. Things such as an infinite list, pagination or tag list comprise a set of reusable UI components for use across your entire app.

-There are a good suite of libraries for reusable components such as material-ui to speed up development.

-The core of building good reusable components is thinking about the minimum amount of data that needs to be passed in for the component to work.

-Functional components are lightweight functions that return a JSX tree. They’re suited for small components such as single elements or groups of small DOM nodes. You’ll see a few awesome things about functional components:

1. They’re super concise, which means they’re easy to read and write
2. They define all of their props using destructuring as opposed to PropTypes. This is awesome as they’re self-documenting… all props are included in the function signature along with defaults

-Standard components represent the core of your app. These are typically single-purpose components designed and built for a particular route in your app.

-Standard components have no internal state — they receive state as props through a combination of Redux’ @connect and reselect.

• They are typically stored within a folder representing the current route, for example scenes/pages/index.js.

Austin Coding Academy