Working on react web & using react-redux, facing an error (please refer below screenshot). When building application no errors, only navigates to that route getting it. Looks like this.props is not having access to redux context.
Don't know what am missing?
Same implementation is working fine for another component to list all users.
Products.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { GetAllProducts } from "../../redux/actions/ProductsActions";
export class Products extends Component {
componentDidMount() {
this.props.GetAllProducts();
}
render() {
return (
<div className="col-span-12">
{(this.props.allProducts || []).map((product) => {
return <div>{product.productName}</div>;
})}
</div>
);
}
}
const mapStateToProps = (state) => ({
status: state.Products.status,
allProducts: state.Products.productList || [],
});
const mapDispatchToProps = (dispatch) => {
return {
GetAllProducts: () => dispatch(GetAllProducts("products")),
};
};
export default connect(mapStateToProps, mapDispatchToProps)(Products);
ProductsActions.js
import * as actions from "../actions/ActionTypes";
import axios from "axios";
export const GetAllProducts = (catagory) => {
return (dispatch) => {
dispatch({ type: actions.GET_PRODUCT_LIST_PENDING });
axios
.get(`http://localhost:5000/api/get/${catagory}`)
.then((res) => {
dispatch({
type: actions.GET_PRODUCT_LIST_SUCCESS,
payload: res.data,
});
})
.catch((err) => {
dispatch({
type: actions.GET_PRODUCT_LIST_FAILURE,
payload: err,
});
});
};
};
Thank you #El Aoutar Hamza, I've imported like this
Old code:
import { Products } from "./Products";
New code - Resolved
import Products from "./Products";
By removing the curly brackets the issue got resolved.
Related
I'm trying to access data from my API using Redux but when redux tool kit is showing me its an empty array. The api I've populated using postman and the post method seem to work perfectly fine, but attempting to use the get method to access that data it shows an empty array. My DB has the data though. My Data is an array of Object i.e. [ {...} , {...} , {...} ]
API
import axios from "axios";
const url = "http://localhost:5000/info"
export const fetchInfo = () => axios.get(url);
export const createInfo = (newInfo) => axios.post(url, newInfo);
ACTIONS
import * as api from "../api/index.js";
//constants
import { FETCH_ALL, CREATE } from "../constants/actiontypes";
export const getInfo = () => async (dispatch) => {
try {
const { data } = await api.fetchInfo();
console.log(data);
dispatch({ type: FETCH_ALL, payload: data });
} catch (error) {
console.log(error);
}
};
export const createInfo = (info) => async (dispatch) => {
try {
const { data } = await api.createInfo(info);
dispatch({ type: CREATE, payload: data });
} catch (error) {
console.log(error);
}
};
REDUCER
import { FETCH_ALL, CREATE } from "../constants/actiontypes";
export default (infos = [], action) => {
switch (action.type) {
case FETCH_ALL:
return action.payload;
case CREATE:
return [...infos, action.payload];
default:
return infos;
}
};
COMBINE REDUCERS
import {combineReducers} from "redux";
import infos from "./info"
export default combineReducers({infos})
Component I'm trying to to display it in
import React from "react";
//redux
import { useSelector } from "react-redux";
//component
import MovieDetail from "./MovieDetail"
const MovieTitles = () => {
const infos = useSelector((state) => state.infos);
console.log(infos) // shows me empty array
return (
<div>
{infos.map((i) => (
<MovieDetail info={i} />
))}
</div>
);
};
export default MovieTitles;
Is there something else I'm missing which allows to me to access the data?
thanks
I can't read database to insert in 'Text'. I'm using Redux
Json
DiasSemana
|
|__Quarta: "Test Program"
|
|__Quinta: "nothing"
|
|
Class EstudoDia.js I used mapStateToProps, connect and import actions.
import React, { Component } from "react";
import { View, Text } from "react-native";
import { Actions } from "react-native-router-flux";
import { connect } from "react-redux";
import firebase from "firebase";
import { estudoDoDia } from "../actions/AutenticacaoActions";
export class estudoDia extends Component {
componentWillMount() {
//I've tried with 'this.props.quarta' and it didn't work
props.estudoDia(props.quarta);
}
render() {
return (
<View>
<Text>{props.quarta}</Text>
</View>
);
}
}
const mapStateToProps = state => ({
quarta: state.AutenticacaoReducer.quarta
});
export default connect(mapStateToProps, { estudoDoDia })(estudoDia);
types.js
export const MATERIA_DO_DIA = 'materia_do_dia';
ActionReducer.js. I import types and return payload
import { MATERIA_DO_DIA } from "../actions/types";
const INITIAL_STATE = {
quarta: "T.I Program"
};
export default (state = INITIAL_STATE, action) => {
console.log(action);
switch (action.type) {
case MATERIA_DO_DIA:
return { ...state, quarta: action.payload };
default:
return state;
}
};
AutenticacaoActions.js. Used snaphot
import firebase from "firebase";
import { Actions } from "react-native-router-flux";
import { MATERIA_DO_DIA } from "./types";
export const estudoDoDia = quarta => {
return dispatch => {
firebase.database
.ref("/DiasSemana/Quarta")
.once("value")
.then(snapshot => {
quarta = snapshot.val();
dispatch({
type: MATERIA_DO_DIA,
payload: snapshot.val
});
});
};
};
have image in link
enter image description here
thank you if you can help me
I thank you all for your help, in case I discovered that the problem is in the estudoDoDia method in AuthenticationActions.js, I made this change and it worked
export const estudoDoDia = (quarta) => {
return dispatch => {
firebase.database().ref('DiasSemana/Quarta').once('value', function (snapshot) {
console.log(snapshot.val())
quarta = snapshot.toJSON();
dispatch(
{
type: MATERIA_DO_DIA,
payload: quarta
})
})
}
}
Inside once I made it call a function passing the snapshop as a parameter and it worked.
I thank you for your help and thank you all
I am using ReactJs to grab an RSS news feed every 5 seconds to convert it into a JSON string to render it on the webpage. I am using both useEffect and useState hook for this purpose as I am passing the JSON string in the useState hook variable, however. It kind of works but it produces an infinite loop. I have searched through the fixes provided in stack overflow but I couldn't find the exact problem. Here is my code snippet.'
import React, {useEffect, useState} from 'react';
import Carousel from 'react-bootstrap/Carousel';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {getNews} from "../../actions/news";
import Parser from 'rss-parser';
const NewsCarousel = ({getNews, news: {news, loading} }) => {
const [getFeed, setFeed] = useState({
feed: ''
});
useEffect(() => {
const interval = setInterval(() => {
getNews();
}, 5000);
return () => clearInterval(interval);
}, [getNews]);
const { feed } = getFeed;
const newsFeed = feed => setFeed({ ...getFeed, feed: feed });
let parser = new Parser();
parser.parseString(news, function(err, feed){
if (!err) {
newsFeed(feed);
} else {
console.log(err);
}
});
console.log(feed);
return (
<div className="dark-overlay">
</div>
);
};
NewsCarousel.propTypes = {
getNews: PropTypes.func.isRequired,
news: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
news: state.news
});
export default connect(mapStateToProps, {getNews}) (NewsCarousel);
Its when I console.log my feed variable that's when I see in the console the infinite logs.
Below is my getNews Action
import axios from 'axios';
import { GET_NEWS, NEWS_FAIL } from "./types";
export const getNews = () => async dispatch => {
try{
const res = await axios.get('https://www.cbc.ca/cmlink/rss-
topstories');
dispatch({
type: GET_NEWS,
payload: res.data
})
} catch(err) {
dispatch({
type: NEWS_FAIL,
payload: { msg: err}
})
}
};
You need to parse your news only when there is a change in new props. Add another useEffect with news as a dependency so it will be called when the news changes and then update your state there.
import React, {useEffect, useState} from 'react';
import Carousel from 'react-bootstrap/Carousel';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import {getNews} from "../../actions/news";
import Parser from 'rss-parser';
const NewsCarousel = ({getNews, news: {news, loading} }) => {
const [getFeed, setFeed] = useState({
feed: ''
});
useEffect(() => {
const interval = setInterval(() => {
getNews();
}, 5000);
return () => clearInterval(interval);
}, [getNews]);
useEffect(() => {
const newsFeed = feed => setFeed({ ...getFeed, feed: feed });
const parser = new Parser();
parser.parseString(news, function(err, feed){
if (!err) {
newsFeed(feed);
} else {
console.log(err);
}
});
}, [news]);
return (
<div className="dark-overlay">
</div>
);
};
NewsCarousel.propTypes = {
getNews: PropTypes.func.isRequired,
news: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
news: state.news
});
export default connect(mapStateToProps, {getNews}) (NewsCarousel);
I made a reducer that fetches admins, and I want it to display certain admins when I call it in my reducer but I am getting Undefined.
I am still very new to redux so apologies for my mistakes.
I tried to include all the relevant folders:
App.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../store/actions';
class App extends Component {
async componentDidMount() {
fetch(constants.adminUrl + '/admins/data', {
method: 'GET'
}).then((res) => {
return res.json()
}).then(async (res) => {
this.props.setAdminsInColumns(res.admins)
}).catch((error) => {
toast.error(error.message)
})
}
render() {
return (
{/* SOME CODE */}
);
}
}
let app = connect(null, actions)(App);
export default app;
columnsReducer.js
import { FETCH_ADMINS } from '../actions/types'
import { Link } from 'react-router-dom'
import constants from '../../static/global/index'
import React from 'react';
import { toast } from 'react-toastify'
const initialState = {
admins: [],
{
Header: "Responsible",
accessor: "responsibleAdmin",
style: { textAlign: "center" },
// Place where I want to fetch certain admins and get undefined
Cell: props => <span>{props.value && this.state.admins.name ? this.state.admins.find(admin => admin.id === props.value).name : props.value}</span>
}
}
export default function (state = initialState, action) {
switch (action.type) {
case FETCH_ADMINS:
return { ...state, admins: action.admins}
default:
return state
}
}
index.js
import { FETCH_ADMINS } from "./types"
/**
* starts loader for setting admin
*/
export const setAdminsInColumns = (admins) => async dispatch => {
dispatch({ type: FETCH_ADMINS, admins })
}
types.js
export const FETCH_ADMINS = 'fetch_admins'
When I console.log(action.admins) inside the switch case FETCH_ADMINS in the columnsReducer.js file, I can see all the admin information I want, is there a way to make the state global in the columnsReducer.js file so I can read it?
Any help is appreciated!
use mapStateToProps in the connect method. like below
let mapStateToProps = (state)=>{
return {
admins :[yourcolumnsReducer].admins
}
}
let app = connect(mapStateToProps, actions)(App);
//you can use this.props.admins inside your component
MapStateToProps reference
I'm new to React/Redux. I'm making an app using an API but the code doesn't work. When I run the code it says "this.props.recipes.map is not a function" and doesn't render anything.
If I change payload to: "payload: response.data.recipes" then the error changes to "Given action "FETCH_RECIPE", reducer "recipes" returned undefined." but no errors on screen (only in console). I thought writing "(state = [], action)" would solve the problem but it seems not. What's the problem and how do I fix this error?
Action Creator
import recipe from '../apis/recipe';
export const fetchRecipe = () => async dispatch => {
const response = await recipe.get('');
dispatch({ type: 'FETCH_RECIPE', payload: response.data })
};
Reducer
import { combineReducers } from 'redux';
const recipeReducer = (state = [], action) => {
switch(action.type) {
case 'FETCH_RECIPE':
return action.payload;
default:
return state;
}
};
export default combineReducers({
recipes: recipeReducer
});
import React from 'react';
import { connect } from 'react-redux';
import { fetchRecipe } from '../actions';
class Recipe extends React.Component {
componentDidMount() {
this.props.fetchRecipe();
console.log("This doesn't work", this.props.recipes)
}
renderList() {
return this.props.recipes.map(recipe => {
return (
<div>
<p>{recipe.publisher}</p>
</div>
)
})
}
render() {
console.log("First loaded: empty, second time: data fetched", this.props.recipes)
return (
<div>
{this.renderList()}
</div>
);
}
}
const mapStateToProps = (state) => {
return { recipes: state.recipes }
};
export default connect(mapStateToProps,{
fetchRecipe
})(Recipe);
API Request
import axios from 'axios';
import { key } from './config';
export default axios.create({
baseURL: `https://cors-anywhere.herokuapp.com/https://www.food2fork.com/api/search?key=${key}&q=pizza`
});