const mapStateToProps = state => {
return {
items: state.items.items,
error: state.items.error,
loading: state.items.loading
};
};
export function items(state = initialState, action) {
const { type, payload } = action;
switch (type) {
// some code
case "FETCH_SUCCESS":
return {
...state,
items: [ ...state.items, ...payload.items ],
loading: false,
};
// some code
}
}
export const fetchProductsBegin = () => ({ type: FETCH_BEGIN });
const mapStateToProps = state => ({
items: state.items.items,
error: state.items.error,
loading: state.items.loading,
});
const ProductsList = ({
productsList,
checkIsProductAddedToCart,
}) => (
<ul>
{productsList.map(product => (
<Product
addedToCart={checkIsProductAddedToCart(product.id)}
product={product}
/>
))}
</ul>
);
const mapStateToProps(state => ({
productsList: productListSelector(state),
checkIsProductAddedToCart: checkIsProductAddedToCartSelector(state),
}));
export default connect(mapStateToProps)(ProductsList);
const mapStateToProps((state, ownProps) => ({
isAddedToCart: isProductAddedToCartSelector(state, ownProps),
}));
export default connect(mapStateToProps)(ProductDetails);
import { createSelector } from 'reselect';
const cartSelector = state => state.cart;
const cartProductsSelector = createSelector(
cartSelector,
cart => cart.products,
);
// возвращает функцию, принимающую id, которую можно использовать при построении списков
const checkIsProductAddedToCartSelector = createSelector(
cartProductsSelector,
products => id => products.some(product => product.id === id),
);
const productIdSelector = (_, props) => props.product.id;
// возвращает булево значение, важно чтобы в компоненте было свойство product
const isProductAddedToCartSelector = createSelector(
cartProductsSelector,
productIdSelector,
(products, id) => products.some(product => product.id === id),
);
const mapStateToProps = (state) => {
projects: state.projects
}
const mapStateToProps = (state) => ({
projects: state.projects
});
const PrivateRoute = ({ component: Component, isAuth, ...rest }) => (
<Route {...rest} render={props => (isAuth
? <Component {...props} />
: <Redirect to='/login' />
)}
/>
);
const mapStateToProps = state => ({
isAuth: state.isAuth,
});
const mapDispatchToProps = {
authenticated,
};
export default connect(mapStateToProps, mapDispatchToProps)(PrivateRoute);
const initialState: {
entities: {}.
isLoading: {
'ALL': false,
},
isError: {
'ALL': false,
}
}
const someEntityReduser = (state = initalState, action) => {
const { type, payload } = action;
switch (type) {
case GET_ALL_ENTITIES_REQUEST:
return {
...state,
isLoading: {
...state.isLoading,
'ALL': true,
},
isError: {
...state.isError,
'ALL': false,
},
};
case GET_ALL_ENTITIES_SUCCESS:
return {
...state,
entities: payload, // либо нормализация если приходят массивом
isLoading: {
...state.isLoading,
'ALL': false,
},
};
case UPDATE_ENTITY_REQUEST:
return {
...state,
isLoading: {
...state.isLoading,
[payload.id]: true,
},
isError: {
...state.isError,
[payload.id]: false,
},
};
case UPDATE_ENTITY_SUCCESS:
return {
...state,
entities: {
...state.entities,
[payload.id]: payload,
},
isLoading: {
...state.isLoading,
[payload.id]: false,
},
};
/* other cases */
}
}
submitBalance = () => {
// your stuff
};
constructor(props) {
super(props);
this.submitBalance.bind(this);
}
onClick={e => this.submitBalance(someArg, e)}
{ tweets: tweets.data }
const reducer = (state = { tweets: tweets.data }, action) => {
switch (action.type) {
case 'DELETE': {
return {
...state,
tweets: state.tweets.filter(value => value.id !== action.id),
};
}
default:
return state;
}
};
this.props.tasks === nextProps.tasks; // true
export default function addDelete(state = initialState, action){
switch (action.type) {
case "ADD_TASK":
return {
...state,
tasks: [...state.tasks, {{id: action.id, time : action.time, task: action.task}}],
};
case "DELETE_TASK":
return {
...state,
tasks: [...state.tasks.filter(task => task.id != action.id)],
};
case "SET_ACSSES":
return {
...state,
add: !state.add,
};
default:
return state;
}
}
export default function add(time, task, id){
if(!task || !time){
return {
type: "SET_ERROR",
payload: "Error, invalid data"
};
}
return{
type: "ADD_TASK",
payload: {
id: id,
time: time,
task: task,
},
}
}
export const deleteTask = id => ({
type: 'DELETE_TASK',
payload: id,
});
export default function addDelete(state = initialState, action) {
const { type, payload } = action;
switch (type) {
case "ADD_TASK":
return {
...state,
tasks: [...state.tasks, payload],
};
case "DELETE_TASK":
return {
...state,
tasks: [...state.tasks.filter(task => task.id != payload)],
};
case "SET_ACSSES":
return {
...state,
add: !state.add,
};
default:
return state;
}
}
export const getAccounts = (userID) => {
fetch(`${BASE_URL}/users/${userID}/accounts/`).then(resp => {
resp.json().then(accounts => accounts.Items[0].accounts);
})
}
export const getAccounts = userID =>
fetch(`${BASE_URL}/users/${userID}/accounts/`).then(resp => {
resp.json().then(accounts => accounts.Items[0].accounts);
});
response = yield call(getAccounts, userID);
import { fetchInitialDataApi } from './api';
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
const FETCH_DATA_ERROR = 'FETCH_DATA_ERROR';
const fetchDataRequest = () => ({ type: FETCH_DATA_REQUEST });
const fetchDataSuccess = data => ({
type: FETCH_DATA_SUCCES,
payload: data,
});
const fetchDataError = error => ({
type: FETCH_DATA_ERROR,
payload: error,
});
const fetchData => async dispatch => {
try {
dispatch(fetchDataRequest());
const { data } = await fetchDataApi();
dispatch(fetchDataSuccess(data));
} catch error {
dispatch(fetchDataError(error));
}
};
const initialState = {
data: {},
isLoading: false,
isError: false,
error: null,
};
export default function(state = initialState, action) {
const { type, payload } = action;
switch (type) {
case FETCH_DATA_REQUEST:
return {
...state,
isLoading: true,
isError: false,
error: null,
};
case FETCH__DATA_SUCCESS:
return {
...state,
data: payload,
isLoading: false,
};
case FETCH_DATA_ERROR:
return {
...state,
isLoading: false,
isError: true,
error: payload,
};
default:
return state;
}
}
import { fetchInitialDataApi } from './api';
const FETCH_INITIAL_DATA_REQUEST = 'FETCH_INITIAL_DATA_REQUEST';
const FETCH_INITIAL_DATA_SUCCESS = 'FETCH_INITIAL_DATA_SUCCESS';
const FETCH_INITIAL_DATA_ERROR = 'FETCH_INITIAL_DATA_ERROR';
const fetchInitialDataRequest = () => ({ type: FETCH_INITIAL_DATA_REQUEST });
const fetchInitialDataSuccess = data => ({
type: FETCH_INITIAL_DATA_SUCCES,
payload: data,
});
const fetchInitialDataError = error => ({
type: FETCH_INITIAL_DATA_ERROR,
payload: error,
});
const fetchInitialData => async dispatch => {
try {
dispatch(fetchInitialDataRequest());
const { data } = await fetchInitialDataApi();
dispatch(fetchInitialDataSuccess(data));
} catch error {
dispatch(fetchInitialDataError(error));
}
};
const initialState = {
data: {},
isLoading: false,
isError: false,
error: null,
};
export default function(state = initialState, action) {
const { type, payload } = action;
switch (type) {
case FETCH_INITIAL_DATA_REQUEST:
return {
...state,
isLoading: true,
isError: false,
error: null,
};
case FETCH_INITIAL_DATA_SUCCESS:
return {
...state,
data: payload,
isLoading: false,
};
case FETCH_INITIAL_DATA_ERROR:
return {
...state,
isLoading: false,
isError: true,
error: payload,
};
default:
return state;
}
}
export default (state = window._data) => state;
componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
loadArticleComments(article.id)
}
componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
if (
!article.commentsLoaded &&
!article.commentsLoading &&
!this.props.isOpen &&
isOpen
) {
loadArticleComments(article.id)
}
}
case "LOAD_ARTICLE_COMMENTS_SUCCESS": {
return articleState
.setIn(["entities", action.payload.articleId, "commentsLoading"], false)
.setIn(["entities", action.payload.articleId, "commentsLoaded"], true);
}
return (
<div>
<h5>{comment.user}</h5>
{comment.text}
</div>
);
import { login } from './loginDucks';
class UserForm extends Component {
...
handleSubmit = e => {
this.props.login(this.state.form);
}
...
render() {
const { isLoading, isError, shouldRedirect } = this.props;
if (shouldRedirect) <Redirect to="/index" >;
return (
...
);
}
}
const mapStateToProps = state => ({
isLoading: state.login.isLoading,
isError: state.login.isError,
shouldRedirect: state.login.shouldRedirect,
});
const mapDispatchToProps = {
login,
};
export default connect(mapStateToProps, mapDispatchToProps)(UserForm);
const LOGIN_REQUEST = 'LOGIN_REQUEST';
const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
const LOGIN_ERROR = 'LOGIN_ERROR';
const loginSuccess = data => ({
type: LOGIN_SUCCESS,
payload: data,
});
const loginError = data => ({
type: LOGIN_ERROR,
});
export const login = form => async dispatch => {
try {
const res = await axios.post('/api/user', form);
if (!res.data) dispatch(loginError());
dispatch(loginSuccess());
} catch e {
dspatch(loginError());
}
}
const initialState = {
isLoading: false,
isError: false,
shouldRedirect: false,
};
export default (state = initialState, action) => {
const { type, payload } = action;
switch(type) {
case LOGIN_REQUEST:
return {
...state,
isLoading: true,
isError: false,
};
case LOGIN_SUCCESS:
return {
...state,
isLoading: false,
shouldRedirect: false,
};
case LOGIN_ERROR:
return {
...state,
isLoading: false,
isError: true,
};
default:
return state;
}
};
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Route, Switch } from 'react-router';
import { BrowserRouter } from 'react-router-dom';
import Auth from './component/AuthForm';
import Helmet from './aplication';
import loginReducer from './loginDucks';
function user(state = {}, action){
if(action.type === 'ADD_USER'){
return [
...state,
action.user
];
}
return state;
}
const rootReducer = combineReducers({
login: loginReducer,
user,
});
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducer, composeEnhancers(
applyMiddleware(thunk),
));
ReactDOM.render(
<div>
...
</div>,
document.getElementById('content')
export const getReq = data => (
async dispatch => {
try {
dispatch({
type: types.GET_REQUEST,
});
let res = await api.getReq(data);
dispatch({
type: types.GET_SUCCESS,
payload: res,
});
res = await api.getReq2(data);
} catch (error) {
dispatch({
type: types.GET_ERROR,
});
}
}
);
export const getReq = data => (
async dispatch => {
try {
dispatch({
type: types.GET_REQUEST,
});
const res = await api.getReq(data);
dispatch({
type: types.GET_SUCCESS,
payload: res,
});
dispatch(req2(res));
} catch (error) {
dispatch({
type: types.GET_ERROR,
});
}
}
);
export const addComponent = data => {
return async function(dispatch) { // тут добавлен return и аргумент
let comps = await fire.database().ref("components");
comps.push({
name: data.component,
comp: data.component_name
});
//так же в любое время вы можете вызвать dispatch
dispatch({ type: 'someAction', payload: 'someValue' });
};
}
const foo = x => y => x + y;
const foo = x => {
return y => {
return x + y;
}
};
const foo = x => y => x + y;
const a = x(5);
const b = a(6);
console.log(b);
// => 11
y => 5 + y;
export const addComponent = data => async dispatch => {
let comps = await fire.database().ref("components");
// функция продолжит выполнение только когда вернется значение присвамваемое comps
comps.push({
name: data.component,
comp: data.component_name
});
};
let counterReducer = (state=initialState, action) => {
let newstate = { ...state };
switch(action.type){
case "INC":
newstate.counter+=action.payload
return newstate
case "DEC":
newstate.counter+=action.payload
return newstate
default:
return newstate
}
}