3nvi

import React from "react";
import styled from "@emotion/styled";
import faker from "faker";

const NavContainer = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  padding: 15px;
  width: 100%;

3nvi

// Previously
import React from 'react';
import { connect } from 'react-redux';

const Component = props => <div title={props.title}>{props.content}</div>;

export default connect(state => ({
  title: state.title, 
  content: state.content
}))(Component)

3nvi

// Previously
import React from 'react';
import { updateTitleAction } from './actions';
import { connect } from 'react-redux';

const Component = props => <button onClick={props.updateTitle}>Update title</div>;

export default connect(null, { updateTitle: updateTitleAction })(Component)
                       

3nvi

// Previously
import React from 'react';
import { updateTitleAction } from './actions';
import { connect } from 'react-redux';

const Component = props => <button onClick={props.updateTitle}>{props.content}</div>;

export default connect(state => state.content, { updateTitle: updateTitleAction })(Component)
                       

3nvi

import React, { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import { increaseCounterAction } from './actions';
import ExpensiveComponent from './ExpensiveComponent';

// normal way
const Component = props => {
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(increaseCounterAction()}>

3nvi

import React from 'react';
import { useStore } from 'react-redux';
import OtherProvider from './OtherProvider';

const Component = props => {
  const store = useStore();
  
  return <OtherProvider store={store}>{props.children}</OtherProvider>
}

3nvi

import React from 'react';
import { Auth } from 'aws-amplify';

// Create a context that will hold the values that we are going to expose to our components.
// Don't worry about the `null` value. It's gonna be *instantly* overriden by the component below 
export const UserContext = React.createContext(null);

// Create a "controller" component that will calculate all the data that we need to give to our
// components bellow via the `UserContext.Provider` component. This is where the Amplify will be
// mapped to a different interface, the one that we are going to expose to the rest of the app.

3nvi

// index.jsx

// A simple example of the main file of our React app.

import React from 'react';
import ReactDOM from 'react-dom';
import { UserProvider } from './user';
import App from './App';

ReactDOM.render(

3nvi

Keybase proof

I hereby claim:

• I am 3nvi on github.
• I am 3nvi (https://keybase.io/3nvi) on keybase.
• I have a public key ASD5l_nbnK9hfWzN9NYY65iiuGcjdYNNwIenIBePHeKo6wo

To claim this, I am signing this object:

3nvi

import React from 'react';
import withSuspense from './withSuspense'; // A HOC that just wraps the component with a `<React.Suspense />`.

const ProductListPage = React.lazy(
  () => import('./ProductListPage')
);

const ProductDetailsPage = React.lazy(
  () => import( './ProductDetailsPage')
);