Антон Спирин

В плане так их надо передать в редюсер для ошибок, а в компоненте следить за изменением этого редюсера...

const initialState = {
  isFetching: false,
  token: null,
  error: null,
};

function auth(initialState, action) {
  switch(action.type) {
    case LOGIN_REQUEST:
      return {
        ...state,
        isFetching: true,
        error: null,
      };

    case LOGIN_SUCCEEDED:
      return {
        ...state,
        isFetching: false,
        token: action.payload,
      };

    case LOGIN_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload,
      };

    default:
      return state;
  }
}

Будет ли правильным делать запросы из компонента?

Ведь так при ошибке мы может её сразу добавить в стейт errors компонента и всё.

const mapStateToProps = state => ({
  error: loginErrorSelector(state),
});

render() {
  const { error } = this.props;

  if (error) return <TryAgain error={error} action={login} />;
  
  return ( /* ... */ );
}

const form = new FormData();
form.append('key', 'ecmdecmedmjrjekrkl');

fetch('/some-path', {
  method: 'POST',
  headers: "Content-Type: application/x-www-form-urlencoded",
  body: form,
}).then(assets => this.setState({assets}, () => console.log('Fetched!')));

const { param1, param2 } = this.props;

const props = param === 'none' ? {} : { param1, param2 };

return (
  <Component {...props} />
);

<Route exact path="/" render={routeProps => <Form {...rotueProps} />} />

static getDerivedStateFromProps(props, state) {
  if (props.message) {
    return { message: props.message };
  }
}

const filteredUsers = users.filter(user => user.id !== targetId);

export function init() {
  return async (dispatch, getState) => {
    const token =  Cookies.get('token');

    if (token) {
      axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
      await dispatch(fetchUserData());
      // some other code
    } else {
      // else case code
    }
  };
}

const store = configureStore();
store.dispatch.(init());

const Root = () => (
  <Provider store={store}>
    <Router>
      <App />
    </Router>
  </Provider>
);

почему нельзя просто все стили для блоков компонентов написать в одном файле и просто инлайново в index.html их подключить?

Как преобразовать ее в класс, чтобы добавить state с параметром загрузки, который потом можно было бы получать в других частях приложения?

export const getResourcesAction = () => async (dispatch, getState) => {
  const { resources } = getState();
  if (isEmpty(resources)) {
    try {
      dispatch({ type: LOAD_RESOURCES_REQUEST });

      const res = await fetch('/api/resources/all', { credentials: 'include' });
      const data = await res.json();
      dispatch({
        type: LOAD_RESOURCES_SUCCEEDED,
        payload: {
          resources: data,
        },
      });
    } catch (error) {
      dispatch({
        type: LOAD_RESOURCES_FAILED,
        payload: {
          error,
        },
      });
    }
  }
};

const initialState = {
  isFetching: false,
  data: [],
  error: null,
};

export default function resourcesState(state = initialState, action) {
  switch (action.type) {
    case LOAD_RESOURCES_REQUEST:
      return {
        ...state,
        isFetching: true,
        error: null,
      };
    case LOAD_RESOURCES_SUCCEEDED:
      return {
       data: action.payload.resources,
        isFetching: false,
      };
   case LOAD_RESOURCES_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload.error,
      };
    default:
      return state;
  }
}

class Parent extends React.Component {
  childRef = React.createRef();

  render() {
    return <Child childRef={this.childRef} />;
  }
}

class MyImage {
  constructor({
    speed,
    left,
    right,
    top,
    bottom,
    id,
  }) {
    this.speed = speed;
    this.top = top || 0;
    /* ... */
  }
  moveDown() {  /* ... */ }
  moveUp() {  /* ... */ }
  moveRight() {  /* ... */ }
  moveLeft() {  /* ... */ }
  positionF() {  /* ... */ }
}

const img = new MyImage({
  id: '#2',
  speed: 1,
  left : 666,
  top : 400,
});