16
rated 0 times
[
18]
[
2]
/ answers: 1 / hits: 20327
/ 6 Years ago, mon, july 23, 2018, 12:00:00
I have such action:
import { GET, POST, PUT, REMOVE } from ../../Utils/Http;
export const FETCH_ARTICLES = FETCH_ARTICLES;
export const FETCH_ARTICLES_SUCCESS = FETCH_ARTICLES_SUCCESS;
export const FETCH_ARTICLES_FAILURE = FETCH_ARTICLES_FAILURE;
export const RESET_ARTICLES = RESET_ARTICLES;
export function fetchArticles() {
const request = GET(/articles);
return {
type: FETCH_ARTICLES,
payload: request
};
}
export function fetchArticlesSuccess(articles) {
return {
type: FETCH_ARTICLES_SUCCESS,
payload: articles
};
}
export function fetchArticlesFailure(error) {
return {
type: FETCH_ARTICLES_FAILURE,
payload: error
};
}
and reducer:
import {
FETCH_ARTICLES,
FETCH_ARTICLES_SUCCESS,
FETCH_ARTICLES_FAILURE,
RESET_ARTICLES
} from ../Actions/Article;
const INITIAL_STATE = {
articlesList: {
articles: { data: [], total: 0 },
error: null,
loading: false
},
newTractor: { article: null, error: null, loading: false },
activeTractor: { article: null, error: null, loading: false },
deletedTractor: { article: null, error: null, loading: false }
};
const reducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case FETCH_ARTICLES:
return {
...state,
articleList: { articles: {}, error: null, loading: true }
};
case FETCH_ARTICLES_SUCCESS:
return {
...state,
articleList: { articles: action.payload, error: null, loading: false }
};
case FETCH_ARTICLES_FAILURE:
return {
...state,
articleList: { articles: {}, error: action.payload, loading: false }
};
case RESET_ARTICLES:
return {
...state,
articleList: { articles: {}, error: null, loading: false }
};
default:
return state;
}
};
export default reducer;
And i try it to use this way in list component:
import React, { Component } from react;
import { connect } from react-redux;
import { isUndefined } from lodash;
import {
fetchArticles,
fetchArticlesSuccess,
fetchArticlesFailure
} from ../../Store/Actions/Article;
class ArticleList extends Component {
componentDidMount() {
this.props.fetchArticles();
}
render() {
return <div className=ui segment />;
}
}
const mapDispatchToProps = dispatch => {
return {
fetchArticles: () => {
dispatch(fetchArticles()).then(response => {
!response.error
? dispatch(fetchArticlesSuccess(response.payload.data))
: dispatch(fetchArticlesFailure(response.payload.data));
});
}
};
};
export default connect(null, mapDispatchToProps)(ArticleList);
also Http.js:
import axios from axios;
const http = axios.create({
baseURL: process.env.BASE_API_URL
});
export const GET = (url, params) => {
return new Promise((resolve, reject) => {
http({
method: get,
url,
params
})
.then(response => {
resolve(response);
})
.catch(err => {
console.log(GET err , err);
reject(err);
});
});
};
...
But as result I get:
TypeError: dispatch is not a function in dispatch(fetchArticles()).then(response => {
What I do wrong?
Also how can i write this part:
fetchTractors()).then(response => {
!response.error
? dispatch(fetchTractorsSuccess(response.payload.data))
: dispatch(fetchTractorsFailure(response.payload.data));
}
in component class? is it possible? (not to move it to the mapDispatchToProps block)
i took some ideas from here: https://github.com/rajaraodv/react-redux-blog/
More From » reactjs
