Okay so I am using Redux and Axios to post data to my server and subsequently rendering the server response, error or otherwise, in my component. There are multiple post requests' response that fill up the Redux store and I am trying to render those responses whenever one is triggered.
I am getting the response from the server in my component like this:
const createdPost = useSelector( state => state.createPost );
const { loading: createdPostLoading, error: createdPostError, success: createdPostSuccess } = createdPost;
const uploadedImage = useSelector( state => state.uploadImage );
const { loading: uploadedImageLoading, error: uploadedImageError, success: uploadedImageSuccess } = uploadedImage;
const deletedImage = useSelector( state => state.deleteImage);
const { loading: deletedImageLoading, error: deletedImageError, success: deletedImageSuccess } = deletedImage;
So in my useEffect I'm checking their values and rendering them, like this:
const [ responseMessage, setResponseMessage ] = useState( '' );
useEffect( () => {
if ( createdPostError ) {
setResponseMessage( createdPostError );
} else if ( createdPostSuccess ) {
setResponseMessage( createdPostSuccess );
} else if ( uploadedImageError ) {
setResponseMessage( uploadedImageError );
} else if ( uploadedImageSuccess ) {
setResponseMessage( uploadedImageSuccess );
} else if ( deletedImageError ) {
setResponseMessage( deletedImageError );
} else if ( deletedImageSuccess ) {
setResponseMessage( deletedImageSuccess );
}
}, [ createdPostError, createdPostSuccess, uploadedImageError, uploadedImageSuccess, deletedImageError, deletedImageSuccess ] );
And the render function look like this:
{
<Message type='Error' text={responseMessage} />
}
The issue right now is whenever I try to delete an image and the server fails to delete it, I get the uploadedImageSuccess response, which I think I'm getting from the store where it is already populated with previously uploaded image response from the server. I am supposed to get the delete image response. If I log the value of deletedImageError then I can see the actual server response. It doesn't render it.
The conditional statement in useEffect for the uploadedImageSuccesss is being triggered. So I am guessing this is not the proper way of handling error. Anybody know a good way of handling them? Where am I going wrong here?
UPDATE
Here's the full code:
Redux:
=================
CONSTANTS.js:
=================
export const CREATE_POST_REQUEST = 'CREATE_POST_REQUEST';
export const CREATE_POST_SUCCESS = 'CREATE_POST_SUCCESS';
export const CREATE_POST_FAIL = 'CREATE_POST_FAIL';
export const UPLOAD_IMAGE_REQUEST = 'UPLOAD_IMAGE_REQUEST';
export const UPLOAD_IMAGE_SUCCESS = 'UPLOAD_IMAGE_SUCCESS';
export const UPLOAD_IMAGE_FAIL = 'UPLOAD_IMAGE_FAIL';
export const DELETE_IMAGE_REQUEST = 'DELETE_IMAGE_REQUEST';
export const DELETE_IMAGE_SUCCESS = 'DELETE_IMAGE_SUCCESS';
export const DELETE_IMAGE_FAIL = 'DELETE_IMAGE_FAIL';
=================
REDUCERjs
=================
export const createPostReducer = ( state = { campaign: {} }, action ) => {
switch ( action.type ) {
case CREATE_POST_REQUEST:
return { loading: true };
case CREATE_POST_SUCCESS:
return {
loading: false,
success: action.payload
};
case CREATE_POST_FAIL:
return {
loading: false,
error: action.payload
};
default:
return state;
}
}
export const uploadImageReducer = ( state = {}, action ) => {
switch ( action.type ) {
case UPLOAD_IMAGE_REQUEST:
return { loading: true };
case UPLOAD_IMAGE_SUCCESS:
return {
loading: false,
success: action.payload
};
case UPLOAD_IMAGE_FAIL:
return {
loading: false,
error: action.payload
};
default:
return state;
}
}
export const deleteImageReducer = ( state = {}, action ) => {
switch ( action.type ) {
case DELETE_IMAGE_REQUEST:
return { loading: true };
case DELETE_IMAGE_SUCCESS:
return {
loading: false,
success: action.payload
};
case DELETE_IMAGE_FAIL:
return {
loading: false,
error: action.payload
};
default:
return state;
}
}
=================
ACTIONS.js
=================
export const createPost = ( postData ) => async ( dispatch ) => {
try {
dispatch({
type: CREATE_POST_REQUEST
});
const { data } = await axios.post( '/api/posts', postData);
dispatch({
type: CREATE_POST_SUCCESS,
payload: data.message
});
} catch ( error ) {
dispatch({
type: CREATE_POST_FAIL,
payload: error.message
});
}
}
export const uploadImage = ( imageData ) => async ( dispatch ) => {
try {
dispatch({
type: UPLOAD_IMAGE_REQUEST
});
const { data } = await axios.post( '/api/posts/upload-image', imageData );
dispatch({
type: UPLOAD_IMAGE_SUCCESS,
payload: data
});
} catch ( error ) {
dispatch({
type: UPLOAD_IMAGE_FAIL,
payload: error.message
});
}
}
export const deleteImage = ( imageData ) => async ( dispatch ) => {
try {
dispatch({
type: DELETE_IMAGE_REQUEST
});
const { data } = await axios.post( '/api/posts/delete-image', imageData );
dispatch({
type: DELETE_IMAGE_SUCCESS,
payload: data
});
} catch ( error ) {
dispatch({
type: DELETE_IMAGE_FAIL,
payload: error.message
});
}
}
=================
STORE.js
=================
const reducer = combineReducers({
createPost: createPostReducer,
uploadImage: uploadImageReducer,
deleteImage: deleteImageReducer
});
const middleware = [ thunk ];
const store = createStore(
reducer,
initialState,
composeWithDevTools( applyMiddleware( ...middleware ) )
);
export default store;
Here's how the component looks like:
const Post = () => {
const [ responseMessage, setResponseMessage ] = useState( '' );
const createdPost = useSelector( state => state.createPost );
const { loading: createdPostLoading, error: createdPostError, success: createdPostSuccess } = createdPost;
const uploadedImage = useSelector( state => state.uploadImage );
const { loading: uploadedImageLoading, error: uploadedImageError, success: uploadedImageSuccess } = uploadedImage;
const deletedImage = useSelector( state => state.deleteImage);
const { loading: deletedImageLoading, error: deletedImageError, success: deletedImageSuccess } = deletedImage;
useEffect( () => {
if ( createdPostError ) {
setResponseMessage( createdPostError );
} else if ( createdPostSuccess ) {
setResponseMessage( createdPostSuccess );
} else if ( uploadedImageError ) {
setResponseMessage( uploadedImageError );
} else if ( uploadedImageSuccess ) {
setResponseMessage( uploadedImageSuccess );
} else if ( deletedImageError ) {
setResponseMessage( deletedImageError );
} else if ( deletedImageSuccess ) {
setResponseMessage( deletedImageSuccess );
}
}, [ createdPostError, createdPostSuccess, uploadedImageError, uploadedImageSuccess, deletedImageError, deletedImageSuccess ] );
return (
{
<Message type='Error' text={responseMessage} />
}
)
}
export default Post;
Create separate Reducer for Generic Error Handler
export const genericErrorReducer=(state,action){
switch(action.type){
case 'GENERIC_ERROR':
return {
error:action.payload
}
}
}
call this when you are getting error from server rather then creating separate local state for each error
Related
In this page the user can login, but if the untilDate is bigger than the current date it should log out the user. The code runs fine 1/2 times, the other giving me the error on the title.
I am working with createContext for user login. This is the AuthContext file
import React from "react";
import { createContext, useEffect, useReducer } from "react";
const INITIAL_STATE = {
user: JSON.parse(localStorage.getItem("user")) || null,
loading: false,
error: null,
};
export const AuthContext = createContext(INITIAL_STATE);
const AuthReducer = (state, action) => {
switch (action.type) {
case "LOGIN_START":
return {
user: null,
loading: true,
error: null,
};
case "LOGIN_SUCCESS":
return {
user: action.payload,
loading: false,
error: null,
};
case "LOGOUT":
return {
user: null,
loading: false,
error: null,
};
case "LOGIN_FAILURE":
return {
user: null,
loading: false,
error: action.payload,
};
case "UPDATE_USER_DATE":
const updatedUser = { ...state.user };
updatedUser.activeUntil = action.payload;
return {
...state,
user: updatedUser,
};
default:
return state;
}
};
export const AuthContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(AuthReducer, INITIAL_STATE);
useEffect(() => {
localStorage.setItem("user", JSON.stringify(state.user));
}, [state.user]);
return (
<AuthContext.Provider
value={{
user: state.user,
loading: state.loading,
error: state.error,
dispatch,
}}
>
{children}
</AuthContext.Provider>
);
};
When the user clicks the login button, it runs the handleClick function:
const handleClick = async (e) => {
e.preventDefault();
dispatch({ type: "LOGIN_START" });
let date = new Date().toJSON();
let userdate = date;
try {
const res = await axios.post("/auth/signin", credentials);
dispatch({ type: "LOGIN_SUCCESS", payload: res.data.details });
userdate = user.activeUntil;
//do if date is <=current datem dispatch logout
} catch (err) {
if (userdate > date) {
console.log("undefined data");
} else {
dispatch({ type: "LOGIN_FAILURE", payload: err.response.data });
}
}
if (userdate > date) {
dispatch({ type: "LOGOUT" });
console.log("If you are seeing this your contract has expired");
} else {
// navigate("/myinfo");
}
};
The console error happens from this line dispatch({ type: "LOGIN_FAILURE", payload: err.response.data });
Is there a way I can bypass this error or a different way I can write my code to make it work?
This is the full code of login page
import React from "react";
import axios from "axios";
import { useContext, useState } from "react";
import { useNavigate } from "react-router-dom";
import { AuthContext } from "../../context/AuthContext";
import {
Container,
FormWrap,
FormContent,
Form,
FormInput,
FormButton,
Icon,
FormH1,
SpanText,
IconWrapper,
IconL,
} from "./signinElements";
import Image from "../../images/Cover.png";
const Login = () => {
const [credentials, setCredentials] = useState({
namekey: undefined,
password: undefined,
});
/* */
// to view current user in console
const { user, loading, error, dispatch } = useContext(AuthContext);
let msg;
const navigate = useNavigate();
const handleChange = (e) => {
setCredentials((prev) => ({ ...prev, [e.target.id]: e.target.value }));
};
const handleClick = async (e) => {
e.preventDefault();
dispatch({ type: "LOGIN_START" });
let date = new Date().toJSON();
let userdate = date;
try {
const res = await axios.post("/auth/signin", credentials);
dispatch({ type: "LOGIN_SUCCESS", payload: res.data.details });
userdate = user.activeUntil;
//do if date is <=current datem dispatch logout
} catch (err) {
if (userdate > date) {
console.log("undefined data");
} else {
dispatch({ type: "LOGIN_FAILURE", payload: err.response.data });
}
}
if (userdate > date) {
dispatch({ type: "LOGOUT" });
console.log("If you are seeing this your contract has expired");
} else {
// navigate("/myinfo");
}
};
// console.log(user.activeUntil); //type to view current user in console
return (
<>
<Container>
<IconWrapper>
<IconL to="/">
<Icon src={Image}></Icon>
</IconL>
</IconWrapper>
<FormWrap>
<FormContent>
<Form action="#">
<FormH1>
Sign in with the namekey and password written to you on your
contract.
</FormH1>
<FormInput
type="namekey"
placeholder="Namekey"
id="namekey"
onChange={handleChange}
required
/>
<FormInput
type="password"
placeholder="Password"
id="password"
onChange={handleChange}
/>
<FormButton disabled={loading} onClick={handleClick}>
Login
</FormButton>
<SpanText>{msg}</SpanText>
{error && <SpanText>{error.message}</SpanText>}
{error && (
<SpanText>
Forgot namekey or password? Contact our support team +355 69
321 5237
</SpanText>
)}
</Form>
</FormContent>
</FormWrap>
</Container>
</>
);
};
export default Login;
The problem was i was trying to call a localy stored user and 1 time it wasnt loaded and the other it was. Simply fixed it by changing the if statement to check directly in result details without having to look in local storage.
const [expired, setExpired] = useState(false);
const handleClick = async (e) => {
e.preventDefault();
dispatch({ type: "LOGIN_START" });
try {
const res = await axios.post("/auth/signin", credentials);
dispatch({ type: "LOGIN_SUCCESS", payload: res.data.details });
let date = new Date().toJSON();
if (res.data.details.activeUntil < date) {
dispatch({ type: "LOGOUT" });
console.log("Users contract has expired");
setExpired(!expired);
} else {
navigate("/myinfo");
}
} catch (err) {
dispatch({ type: "LOGIN_FAILURE", payload: err.response.data });
}
};
I have this component (associated with the route /product/:id in App.js)
import React, { useEffect} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Spinner from '../components/Spinner';
import { getProductDetails } from '../actions/productActions';
const ProductDetailsScreen = ({ match }) => {
const { product, loading, error } = useSelector(
(state) => state.productDetails
);
console.log(product);// < ------- This outputs the previously display product, then undefined, then the targeted product
const dispatch = useDispatch();
useEffect(() => {
dispatch(getProductDetails(match.params.id));
}, [match]);
return (
<div>
<div className='container'>
{loading ? (
<Spinner />
) : error ? (
<h1>{error}</h1>
) : (
<div>
<h1>{product.name}</h1>
<span>
<strong>Price: </strong>${product.price}
</span>
</div>
)}
</div>
<div>
);
};
export default ProductDetailsScreen;
In another component I have this
<Link to={`/product/${_id}`}>View Details</Link>
which is supposed to go to ProductDetailsScreen component, and fill the screen with the product's details based on the _id passed. However, although the redux state is populated correctly from the backend with the product's details whose _id is passed, the components' elements aren't filled with the product's details as it is supposed to be, although I am checking if the product is done loading and there is no error. The component seems to be rendered 3 times based on the console.log(product). The first time it outputs the previously displayed product (I think I need to clear the state), then undefined, and then the target product!
Why? What am I doing wrong?
EDIT1:
the reducer
export const productDetailsReducer = (state = { product: {} }, action) => {
const { type, payload } = action;
switch (type) {
case PRODUCT_GET_REQUEST:
return { loading: true };
case PRODUCT_GET_SUCCESS:
return { loading: false, success: true, product: payload };
case PRODUCT_GET_FAIL:
return {
loading: false,
error: payload,
};
case PRODUCT_GET_RESET:
return { product: {} };
default:
return state;
}
};
and the action
export const getProductDetails = (productId) => async (dispatch) => {
try {
dispatch({
type: PRODUCT_GET_REQUEST,
});
const { data } = await axios.get(`/api/products/${productId}`);
dispatch({
type: PRODUCT_GET_SUCCESS,
payload: data,
});
} catch (error) {
dispatch({
type: PRODUCT_GET_FAIL,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
Please try below.
Reducer
export const productDetailsReducer = (state = { product: {} }, action) => {
const { type, payload } = action;
switch (type) {
case PRODUCT_GET_REQUEST:
return { ...state, loading: true };
case PRODUCT_GET_SUCCESS:
return { ...state, loading: false, success: true, product: payload };
case PRODUCT_GET_FAIL:
return {
...state,
loading: false,
error: payload
};
case PRODUCT_GET_RESET:
return { ...state, product: {} };
default:
return state;
}
};
I have a little problem.
I have diferent reducers in different files using a combine reducer, but when i try to use the "different"
INITIAL STATES on these reducers it doesnt apear
For example
Product Reducer -> This is the state that i have to take
const INITIAL_STATE = {
productosInventario: [],
loading: false,
error: ''
Category Reducer -> this is the state for these reducer
const INITIAL_STATE = {
categorias: [],
categoriaActual: '',
loading: false,
error: ''
}
The idea is use both on these component:
Component:
import React, { Component } from 'react'
/* Components */
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import CardItemInventario from '../components/inventario/CardItemInventario'
import * as ProductoActions from '../actions/ProductoActions'
import * as CategoriasActions from '../actions/CategoriasActions'
/* Styles */
import Spinner from '../components/Spinner'
import Fatal from '../components/Fatal'
import '../assets/styles/Containers/Inventario.scss'
class Inventario extends Component {
async componentDidMount() {
await this.props.traerTodosLosProductos();
}
handleChangeCategoria = (e) => {
this.props.cambioCategoriaInventario(e.target.value)
this.props.traerProductosPorCategoriaInventario(e.target.value)
}
/* Mapea todas las categorias disponibles en base de datos */
traerCategoriasInventario = () => this.props.categoriasInventario.map(category => {
let categori = category.categoria
return (
<option
value={categori}
>
{categori}
</option>
)
})
ponerContenido = () => {
if (this.props.loading) {
return (
<Spinner />
)
}
if (this.props.error) {
return (
<Fatal
error={this.props.error} />
)
}
return (
<>
<div className="button-add__cont">
<h1 className="button-add__title">
Inventario
</h1>
<Link to='/agregarinventario' className="button-add__cont--link">
Agregar a Inventario
</Link>
</div>
<select
name="categoriaSelect"
id=""
onChange={this.handleChangeCategoria}
className="selector-categoria"
>
<option value='' defaultValue> - Categoria -</option>
{this.traerCategoriasInventario()}
</select>
<div className="inventario-cont">
{this.imprimirProductos()}
</div>
</>
)
}
imprimirProductos = () => this.props.productosInventario.map(Productos =>
<CardItemInventario
nombre={Productos.nombre}
marca={Productos.marca}
cantidad={Productos.cantidad}
distribuidor={Productos.distribuidor}
precio={Productos.precio}
/>
)
render() {
console.log(this.props)
return (
<>
{this.ponerContenido()}
</>
)
}
}
const mapStateToProps = (reducers) => {
return (
reducers.ProductoReducer,
reducers.CategoriasReducer
)
}
const mapDispatchToProps = {
...ProductoActions,
...CategoriasActions
}
export default connect(mapStateToProps, mapDispatchToProps)(Inventario);
actions ->
productoActions:
import axios from 'axios'
import {
TRAER_TODOS_LOS_PRODUCTOS
} from '../types/ProductoTypes'
import { host_name, port_redux } from '../../../config'
import { CARGANDO, ERROR } from '../types/GlobalTypes'
const axiosConf = {
baseURL: `http://${host_name}:${port_redux}`
}
export const traerTodosLosProductos = () => async (dispatch) => {
dispatch({
type: CARGANDO
})
try {
const res = await axios.get(`/api/productos/get/listar`, axiosConf)
dispatch({
type: TRAER_TODOS_LOS_PRODUCTOS,
payload: res.data
})
} catch (error) {
console.log("Error: " + error)
dispatch({
type: ERROR,
payload: error.message
})
}
}
export const traerProductosPorCategoriaInventario = (categoria) => async (dispatch) => {
try {
const res = await axios.get(`/api/cotizacion/get/productosporcategoria/${categoria}`, axiosConf)
dispatch({
type: TRAER_TODOS_LOS_PRODUCTOS,
payload: res.data
})
} catch (error) {
console.log("Error: " + error)
dispatch({
type: ERROR,
payload: error.message
})
}
}
categoryActions_ >
import axios from 'axios'
import { host_name, port_redux } from '../../../config'
import { CARGANDO, ERROR } from '../types/GlobalTypes'
import {
LISTAR_CATEGORIAS,
CATEGORIA_ACTUAL
} from '../types/CategoriasTypes'
const axiosConf = {
baseURL: `http://${host_name}:${port_redux}`
}
export const traerCategoriasInventario = () => (dispatch) => {
const res = axios.get(`/api/categorias/get/listar`, axiosConf)
console.log(res)
dispatch({
type: LISTAR_CATEGORIAS,
payload: res.data.data
})
}
export const cambioCategoriaInventario = (categoria) => async (dispatch) => {
try {
dispatch({
type: CATEGORIA_ACTUAL,
payload: categoria
})
} catch (error) {
console.log("Error: " + error)
dispatch({
type: ERROR,
payload: error.message
})
}
}
const mapStateToProps = (reducers) => {
return (
reducers.ProductoReducer,
reducers.CategoriasReducer
)
}
It seems like you are having some confusion between state and reducer. The state is the object which contains all of your data. It is just a plain javascript object. The reducer is a function which takes the state object and an action and returns a new state object.
Your setup should look something like this:
const productoReducer = (state = INITIAL_PRODUCTOS, action ) => {
switch ( action.type ) {
case 'TRAER_TODOS_LOS_PRODUCTOS':
/* ... code here ... */
default:
return state;
}
}
const categoriasReducer = (state = INITIAL_CATEGORIAS, action ) => {
switch ( action.type ) {
case 'LISTAR_CATEGORIAS':
/* ... code here ... */
default:
return state;
}
}
export const reducer = combineReducers({
producto: productoReducer,
categorias: categoriasReducer,
})
Here we have two separate reducers for categories and for products, and each gets a separate initial state. We use combineReducers to put them together so now the combined state has properties producto and categorias.
Your component Inventario needs to access a bunch of values from state: categoriasInventario, productosInventario, loading, and error. Rather than passing the state into the component, we use mapStateToProps to extract these values and pass them as props.
const mapStateToProps = (state) => {
return {
categoriasInventario: state.categorias.categorias,
productosInventario: state.productos.productosInventario,
loading: state.categorias.loading || state.productos.loading,
error: state.categorias.error || state.productos.error,
}
}
Hey guys just moved to redux so in react what i was doing was in componentDidMount(), i was calling api and soon as i received the data i was setting loading to false (initially loading was true) to get rid of the 'react spinner',
but after using redux now in componentDidMount() i am calling my action creater which is in another and there i am receving my data so how do i manage 'loading' here ? can i somehow pass something from action creater to my component that triggers state and set loading to false ? or is there any other to do it ? How do you all manage it ?
here is my code
Home.js
class home extends Component {
UNSAFE_componentWillMount() {
this.props.verifyToken();
}
componentDidMount() {
this.props.categoryAction();
}
constructor(props) {
super(props);
this.state = {
categoriesWithTheirImages: [],
displayToggle: false,
loading: false,
};
}
renderCategory = () => {
return this.props.allCategories.map((item) => {
return (
<div
className="category_div"
key={item._id}
onClick={() => this.setState({ displayToggle: true })}
>
<img
src={item.image}
alt="miss-mistake"
className="category_image_home"
/>
<span className="category_heading_home">{item.categoryName}</span>
</div>
);
});
};
render() {
if (this.state.loading) {
return (
<div className="sweet-loading-main">
<FadeLoader
css={override}
sizeUnit={"px"}
size={50}
color={"#ff9d72"}
loading={this.state.loading}
/>
</div>
);
} else {
console.log(this.props.allCategories);
return (
<React.Fragment>
{/* <Fade left> */}
<Header />
<div className="main_content_homepage">
<p className="category_select">Please select a category</p>
<div className="category_list">{this.renderCategory()}</div>
</div>
{this.renderStoryActionDialog()}
{/* </Fade> */}
</React.Fragment>
);
}
}
}
const mapStateToProps = (state) => {
console.log(state);
const images = [family, ring, beer, feedback, academic];
let categoriesWithImages = state.getCategoryReducer.map((item, index) => {
item.image = images[index];
return item;
});
console.log(categoriesWithImages);
return { allCategories: categoriesWithImages };
};
export default connect(mapStateToProps, { verifyToken, categoryAction })(home);
and my action.js file
import { CATEGORY } from "../actionTypes";
export const categoryAction = ()=> {
return dispatch => {
fetch("http://localhost:3000/api/get_categories", {
method: "GET",
}).then(res=>res.json())
.then(response => {
console.log(response)
dispatch({ type: CATEGORY, payload: response });
})
.catch(err => console.log("Eror in adding", err));
};
};
reducer file
import { USER, CATEGORY} from "../actionTypes";
const getCategoryReducer = (state = [], action) => {
switch (action.type) {
case CATEGORY:
return action.payload;
default:
return state;
}
};
export default getCategoryReducer;
You should handle the loading state in your reducer file. At the moment, it's defined in your Component file. For e.g when you dispatch the action, it should update your loading state too. I would do something like this in reducer.
import { USER, FETCH_CATEGORY, FETCH_CATEGORY_SUCCESS, FETCH_CATEGORY_FAIL} from "../actionTypes";
const INITIAL_STATE = {
loading: false,
err: false,
data: []
}
const getCategoryReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case FETCH_CATEGORY:
return Object.assign({}, state, {
loading: true,
data: [],
})
case FETCH_CATEGORY_SUCCESS
return Object.assign({}, state, {
loading: false,
data: action.payload,
})
case FETCH_CATEGORY_FAIL
return Object.assign({}, state, {
loading: false,
data: action.payload,
err: true
})
default:
return state;
}
};
export default getCategoryReducer;
and your action file would look something like this
import { FETCH_CATEGORY, FETCH_CATEGORY_SUCCESS, FETCH_CATEGORY_FAIL } from "../actionTypes";
export const categoryAction = ()=> {
//setting loading to true
return dispatch => {
dispatch({ type: FETCH_CATEGORY });
fetch("http://localhost:3000/api/get_categories", {
method: "GET",
}).then(res=>res.json())
.then(response => {
//setting loading to false
dispatch({ type: FETCH_CATEGORY_SUCCESS, payload: response });
})
.catch(err => console.log("Eror in adding", err); dispatch({ type: FETCH_CATEGORY_FAIL, payload: err }););
};
};
You can then read the loading props in your Home.js
I've been following a great course on how to build a server-side rendered app with React and Redux, but I'm now in a situation that the course doesn't cover and I can't figure out by myself.
Please consider the following component (it's pretty basic, except for the export part at the bottom):
class HomePage extends React.Component {
componentDidMount() {
this.props.fetchHomePageData();
}
handleLoadMoreClick() {
this.props.fetchNextHomePagePosts();
}
render() {
const posts = this.props.posts.homepagePosts;
const featuredProject = this.props.posts.featuredProject;
const featuredNews = this.props.posts.featuredNews;
const banner = this.props.posts.banner;
const data = ( posts && featuredProject && featuredNews && banner );
if( data == undefined ) {
return <Loading />;
}
return(
<div>
<FeaturedProject featuredProject={ featuredProject } />
<FeaturedNews featuredNews={ featuredNews } />
<Banner banner={ banner } />
<PostsList posts={ posts } heading="Recently on FotoRoom" hasSelect={ true } />
<LoadMoreBtn onClick={ this.handleLoadMoreClick.bind( this ) } />
</div>
);
}
}
function mapStateToProps( { posts } ) {
return { posts }
}
export default {
component: connect( mapStateToProps, { fetchHomePageData, fetchNextHomePagePosts } )( HomePage ),
loadData: ( { dispatch } ) => dispatch( fetchHomePageData() )
};
The above works fine: the loadData function makes an API request to fetch some data, which is fed into the component through the mapStateToProps function. But what if I wanted to fire multiple action creators in that same loadData function? The only thing that kind of works is if I write the function like this:
function loadData( store ) {
store.dispatch( fetchFeaturedNews() );
return store.dispatch( fetchHomePageData() );
}
export default {
component: connect( mapStateToProps, { fetchHomePageData, fetchNextHomePagePosts } )( HomePage ),
loadData: loadData
};
but this is not great because I need all data to be returned... Keep in mind that the exported Component ends up in the following route configuration:
const Routes = [
{
...App,
routes: [
{
...HomePage, // Here it is!
path: '/',
exact: true
},
{
...LoginPage,
path: '/login'
},
{
...SinglePostPage,
path: '/:slug'
},
{
...ArchivePage,
path: '/tag/:tag'
},
]
}
];
and here's how the loadData function is used once the component is needed by a certain route:
app.get( '*', ( req, res ) => {
const store = createStore( req );
const fetchedAuthCookie = req.universalCookies.get( authCookie );
const promises = matchRoutes( Routes, req.path ).map( ( { route } ) => {
return route.loadData ? route.loadData( store, req.path, fetchedAuthCookie ) : null;
}).map( promise => {
if( promise ) {
return new Promise( ( resolve, reject ) => {
promise.then( resolve ).catch( resolve );
});
}
});
...
}
Also, here's an example of the actions fired by the action creators. They all return promises:
export const fetchHomePageData = () => async ( dispatch, getState, api ) => {
const posts = await api.get( allPostsEP );
dispatch({
type: 'FETCH_POSTS_LIST',
payload: posts
});
}
and the reducer:
export default ( state = {}, action ) => {
switch( action.type ) {
case 'FETCH_POSTS_LIST':
return {
...state,
homepagePosts: action.payload.data
}
default:
return state;
}
}
So your actions return a Promise, and you are asking how can you return more than one Promise. Use Promise.all:
function loadData({ dispatch }) {
return Promise.all([
dispatch( fetchFeaturedNews() ),
dispatch( fetchHomePageData() ),
]);
}
But... remember that Promise.all will resolve when all of it's Promises resolve, and it will return an Array of values:
function loadData({ dispatch }) {
return Promise.all([
dispatch( fetchFeaturedNews() ),
dispatch( fetchHomePageData() ),
]).then(listOfResults => {
console.log(Array.isArray(listOfResults)); // "true"
console.log(listOfResults.length); // 2
});
}
So you will probably want to handle it differently.