Best Practices Redux

In 2019 there is still a very important place for Redux in developing larger web apps that have not been as established with the newer approaches. When advocating Redux, it is the architectural guidance that it provides to applications coming from Flux that I believe to still be so crucial.

The predictable flow of actions to a common store that then pushes the changes in React to update the view allows for predictable and debuggable sequences of operations that are easier to standardize in a team environment.

For every part of your code to which a project can have agreed upon guidelines will mean easier to understand code, a cleaner git history since every developer touching each file won't feel like they have to refactor to their own way.

mapStateToProps

mapStateToProps is a little confusing at first, but upon closer inspection, it is just a simple function (no imported library) that simply returns a specified part of the current state.

const mapStateToProps = state => {
  return { things: state.things };
};

a valid alternative to make easier to read is to destructure the state

const mapStateToProps = ({ configuration }) => {
  return { colors: configuration.colors };
};

mapDispatchToProps

Do this:

const mapDispatchToProps = {
  decrement: () => ({ type: "DECREMENT" }),
  increment: () => ({ type: "INCREMENT" })
};

instead of this:

const mapDispatchToProps = dispatch => {
  return {
    decrement: () => dispatch({ type: "DECREMENT" }),
    increment: () => dispatch({ type: "INCREMENT" })
  };
};

The difference is that we rely on react-redux to inject dispatch on each value that is a function in our mapDispatchToProps object, rather than relying on react-redux to inject dispatch into our mapDispatchToProps function. This is the preferred way from the official react-redux documentation. https://react-redux.js.org/using-react-redux/connect-mapdispatch#defining-mapdispatchtoprops-as-an-object

connect()

When used with the Redux connect() function to export a component such as:

const mapStateToProps = ({ configuration }) => {
  return { colors: configuration.colors };
};

const mapDispatchToProps = {
  decrement: () => ({ type: "DECREMENT" }),
  increment: () => ({ type: "INCREMENT" })
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

we are exporting the combination of a component that is connected to the store. Think of connect() as the glue or interface between the component and the store. Any changes to the state will be reflected in the component because it is “connected” to mapStateToProps and that information is now made available to the component through a prop.