Примеры возможного кода на Redux

index.js

......................................................................................................................................
Имена для action

GET_ _REQUEST получить запрос (запрос начался)
GET_ _SUCCESS получить успешный запрос (запрос получен)

{ type: 'FETCH_DATA_REQUEST' }
{ type: 'FETCH_DATA_FAILURE', error: 'Oops' }
{ type: 'FETCH_DATA_SUCCESS', payload: { ... }, meta: { ... } }

 //constans//actionTypes
                                        
export const APP_LOAD = 'APP_LOAD';
export const REDIRECT = 'REDIRECT';
export const ARTICLE_SUBMITTED = 'ARTICLE_SUBMITTED';
export const SETTINGS_SAVED = 'SETTINGS_SAVED';
export const DELETE_ARTICLE = 'DELETE_ARTICLE';
export const SETTINGS_PAGE_UNLOADED = 'SETTINGS_PAGE_UNLOADED';
export const HOME_PAGE_LOADED = 'HOME_PAGE_LOADED';
export const HOME_PAGE_UNLOADED = 'HOME_PAGE_UNLOADED';
export const ARTICLE_PAGE_LOADED = 'ARTICLE_PAGE_LOADED';
export const ARTICLE_PAGE_UNLOADED = 'ARTICLE_PAGE_UNLOADED';
export const ADD_COMMENT = 'ADD_COMMENT';
export const DELETE_COMMENT = 'DELETE_COMMENT';
export const ARTICLE_FAVORITED = 'ARTICLE_FAVORITED';
export const ARTICLE_UNFAVORITED = 'ARTICLE_UNFAVORITED';
export const SET_PAGE = 'SET_PAGE';
export const APPLY_TAG_FILTER = 'APPLY_TAG_FILTER';
export const CHANGE_TAB = 'CHANGE_TAB';
export const PROFILE_PAGE_LOADED = 'PROFILE_PAGE_LOADED';
export const PROFILE_PAGE_UNLOADED = 'PROFILE_PAGE_UNLOADED';
export const LOGIN = 'LOGIN';
export const LOGOUT = 'LOGOUT';
export const REGISTER = 'REGISTER';
export const LOGIN_PAGE_UNLOADED = 'LOGIN_PAGE_UNLOADED';
export const REGISTER_PAGE_UNLOADED = 'REGISTER_PAGE_UNLOADED';
export const ASYNC_START = 'ASYNC_START';
export const ASYNC_END = 'ASYNC_END';
export const EDITOR_PAGE_LOADED = 'EDITOR_PAGE_LOADED';
export const EDITOR_PAGE_UNLOADED = 'EDITOR_PAGE_UNLOADED';
export const ADD_TAG = 'ADD_TAG';
export const REMOVE_TAG = 'REMOVE_TAG';
export const UPDATE_FIELD_AUTH = 'UPDATE_FIELD_AUTH';
export const UPDATE_FIELD_EDITOR = 'UPDATE_FIELD_EDITOR';
export const FOLLOW_USER = 'FOLLOW_USER';
export const UNFOLLOW_USER = 'UNFOLLOW_USER';
export const PROFILE_FAVORITES_PAGE_UNLOADED = 'PROFILE_FAVORITES_PAGE_UNLOADED';
export const PROFILE_FAVORITES_PAGE_LOADED = 'PROFILE_FAVORITES_PAGE_LOADED';
                                        
NAMING CONVENTIONS

FUNCTIONS:

// get data from state
getUsers(state)
getLoggedUser(state)
getLoggedUserId(state)
getLoggedUserToken(state)

// api requests (AGUD)
apiAddUser()
apiGetUser()
apiGetAllUsers()
apiUpdateUser()
apiDeleteUser()

CONSTANTS:

// action types' suffixes
_REQUIRED
_REQUESTED
_RESOLVED
_REJECTED

// endpoints
API_USERS = '/api/v1/users'
API_AUTH: '/api/v1/auth'

// action types
ADD_USER
GET_USER
UPDATE_USER
DELETE_USER

GET_ALL_USERS
GET_ALL_USERS_REQUESTED
GET_ALL_USERS_RESOLVED
GET_ALL_USERS_REJECTED

LOGIN_USER
LOGIN_USER_REQUESTED
LOGIN_USER_RESOLVED
LOGIN_USER_REJECTED

SHOW_NOTIFICATION
SHOW_NOTIFICATION_REQUIRED

SET_IS_VISIBLE_ON
SET_IS_VISIBLE_ON_REQUIRED
SET_IS_VISIBLE_OFF
SET_IS_VISIBLE_OFF_REQUIRED

SET_IS_FETCHING_ON_REQUIRED
SET_IS_FETCHING_OFF_REQUIRED

......................................................................................................................................

ЗАГЛУШКА для STORE.JS (logger and REDUX_DEVTOOLS)
import { createStore, applyMiddleware, compose } from "redux";
import { rootReducer } from "./reducers";
import thunk from "redux-thunk";

import logger from "redux-logger";

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk, logger),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);
console.log(store.getState());

export default store;                                      

"devDependencies": {
    "redux-logger": "^3.0.6"
  }

......................................................................................................................................

ЗАГЛУШКА для STORE.JS (ErrorBoundry)
                                        
import React, { Component } from "react";
import ErrorIndicator from "../error-indicator";

export default class ErrorBoundry extends Component {
  state = {
    hasError: false
  };

  componentDidCatch() {
    this.setState({ hasError: true });
  }

  render() {
    return this.state.hasError ? <ErrorIndicator /> : this.props.children;
  }
}
    // ErrorIndicator
    
  const ErrorIndicator = () => {
  return <div>Error!</div>;
};
......................................................................................................................................

// Вариант с классом
import React, { Component } from "react";
import { connect } from "react-redux";
import "./app.css";

class App extends Component {
  render() {
    const { name, surname, age } = this.props.user;
    console.log(name);
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Мой топ фото</h1>
        </header>
        <p>
          Привет из App, {name} {surname}!
        </p>
        <p>Тебе уже {age} ?</p>
      </div>
    );
  }
}
const mapStateToProps = state => {
  console.log(state);
  return {
    user: state.user
  };
};

export default connect(mapStateToProps)(App);
.....................................................................................................................................
//Вариант с функцией
import React from "react";
import { connect } from "react-redux";
import "./app.css";

const App = ({ name, surname, age }) => (
  <div className="App">
    <header className="App-header">
      <h1 className="App-title">Мой топ фото</h1>
    </header>
    <p>
      Привет из App, {name} {surname}!
    </p>
    <p>Тебе уже {age} ?</p>
    <p className="App-intro">Здесь будут мои самые залайканые фото</p>
  </div>
);

const mapStateToProps = state => {
  console.log(state);
  return {
    name: state.user.name,
    surname: state.user.surname,
    age: state.user.age
  };
};

export default connect(mapStateToProps)(App);
......................................................................................................................................
//Редьюсеры(combineReducers) и mapStateToProps
import { combineReducers } from "redux";
import { pageReducer } from "./page-reducer";
import { userReducer } from "./user-reducer";

export const rootReducer = combineReducers({
  page: pageReducer,
  user: userReducer
});
--------
import React, { Component } from "react";
import { connect } from "react-redux";
import "./app.css";

class App extends Component {
  render() {
    const { user, page } = this.props;
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Мой топ фото</h1>
        </header>
        <p>Привет, {user.name}!</p>
        <p>
          У тебя {page.photos.length} фото за {page.year} год
        </p>
      </div>
    );
  }
}

// const mapStateToProps = state => {
//   console.log(state);
//   return {
//     user: state.user,
//     page: state.page
//   };
// }; ОДИНАКОВО

const mapStateToProps = ({ page, user }) => {
  console.log({ page, user });
  return { page, user };
};