Skip to content

Instantly share code, notes, and snippets.

@Dmitriy-8-Kireev
Last active February 6, 2019 09:48
Show Gist options
  • Save Dmitriy-8-Kireev/74e302c5cd4bcb6fb58ba9092c676b54 to your computer and use it in GitHub Desktop.
Save Dmitriy-8-Kireev/74e302c5cd4bcb6fb58ba9092c676b54 to your computer and use it in GitHub Desktop.
Примеры возможного кода на Redux
......................................................................................................................................
Имена для 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 };
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment