Redux React Tips

redux-tips.js

// 1. Using indices and selectors for storing and accessing state (Store data with an index. Access it with selectors.)
const state = {
 "usersById": {
    123: {
      id: 123,
      name: "Jane Doe",
      email: "jdoe@example.com",
      phone: "555-555-5555",
      //...
    },
    //...
  }
};

// If we need to lookup a specific user object, we simply access the state like so: 
const user = state.usersById[userId];

// Rendering a simple list of users with these data structures.
const getUsers = ({ usersById }) => {
  return Object.keys(usersById).map((id) => usersById[id]);
}

// Get just the selected users from our state like so:
const getSelectedUsers = ({ selectedUserIds, usersById }) => {
  return selectedUserIds.map((id) => usersById[id]);
}

Useful-Links.md

React

Transform JS objects to get something useful

• https://transform.now.sh/

Centralized proptypes pattern

• https://medium.freecodecamp.org/react-pattern-centralized-proptypes-f981ff672f3b

React-Redux

Connect Function

• https://medium.com/mofed/reduxs-mysterious-connect-function-526efe1122e4

bindactioncreators

• https://redux.js.org/api-reference/bindactioncreators

Redux

Best Practices & Tips

• https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e
• https://techblog.appnexus.com/five-tips-for-working-with-redux-in-large-applications-89452af4fdcb
• https://medium.com/horrible-hacks/things-i-wish-i-knew-about-redux-9924abf2f9e0
• https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44

Normalize

• https://hackernoon.com/using-normalizr-to-organize-data-in-stores-practical-guide-82fa061b60fb

Container components & Presentational Components

• https://medium.com/@learnreact/container-components-c0e67432e005
• https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

React Router Redux

Block Updates

• https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md
• remix-run/react-router#5552 (comment)

How do I access router state in a container component?

• https://github.com/reactjs/react-router-redux#how-do-i-access-router-state-in-a-container-component

mapStateToProps

• https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options

react-router-redux-example

• https://github.com/StevenIseki/react-router-redux-example

What is "tree-shaking?" Tree-shaking, also known as "live code inclusion," is the process of eliminating code that is not actually used in a given project. It is similar to dead code elimination but can be much more efficient.