Develop Reference

how to make useEffect without initial render

I just started learning javascript and react-redux, and I'm using useEffect to call POST method. So, I am wondering how to make it not send request to my backend whenever I open or refresh website
my HTTP Post looks like:
export const sendItemData = (items) => {
return async () => {
const sendRequest = async () => {
const response = await fetch("http://localhost:51044/api/Items", {
method: "POST",
body: JSON.stringify(items.Items),
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "same-origin",
});
if (!response.ok) {
throw new Error("Sending data failed!");
}
};
try {
await sendRequest();
} catch (error) {
console.log(error);
}
};
};
and my App.js looks like:
import React from "react";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Items from "./components/Items ";
import { sendItemData } from "./store/items-actions";
function App() {
const dispatch = useDispatch();
const sendItems = useSelector((state) => state.items);
useEffect(() => {
dispatch(sendItemData(sendItems));
}, [sendItems, dispatch]);
return <Items />;
}
export default App;

Ok, this is my way, tray it
export function MyComp(props) {
const initial = useRef(true)
useEffect(() => {
if (!initial.current) {
// Yoyr code
} else {
// Mark for next times
initial.current = false;
}
}, [args]);
return (
<YourContent />
);
}

fetch function doesn't called with react-redux

I want to call a rest api with react-redux but my fetch doesn't called at all.
My actions:
restActions.js file:
export const customerbyidGetAction = (data) => ({ type: types.customerbyidGetAction, data });
My reducer:
restReducer.js file:
import { Map, fromJS } from 'immutable';
import * as types from '../constants/restConstants';
const initialState = {};
const initialImmutableState = fromJS(initialState);
export default function reducer(state = initialImmutableState, action) {
switch(action.type) {
case types.customerbyidGetAction:
return {
...state,
data: action.payload
}
break;
default:
// the dispatched action is not in this reducer, return the state unchanged
return state;
}
}
restApi.js file:
import {customerbyidGetAction} from '../../redux/actions/restActions'
const URL = "https://***"
export default function customerbyidGet() {
return dispatch => {
console.log("not called")
dispatch(customerbyidGetAction());
fetch(URL + 'customer/byid/Get',{
method:'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json',
'token':1234
},
body: JSON.stringify({'customerId': 1})
})
.then(res => {
const r = res.json();
return r;
})
.then(res => {
if(res.error) {
throw(res.error);
}
dispatch(customerbyidGetAction(res));
return res;
})
.catch(error => {
dispatch(customerbyidGetAction(error));
})
}
}
export default apis;
inside my Component:
import React from 'react';
import { Helmet } from 'react-helmet';
import Grid from '#material-ui/core/Grid';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withStyles } from '#material-ui/core/styles';
import PropTypes from 'prop-types';
import {
Help, InsertDriveFile,
MonetizationOn,
Person,
PersonPin,
RemoveRedEye
} from '#material-ui/icons';
import { Link } from 'react-router-dom';
import CounterWidget from '../../../components/Counter/CounterWidget';
import colorfull from '../../../api/palette/colorfull';
import styles from '../../../components/Widget/widget-jss';
import PapperBlock from '../../../components/PapperBlock/PapperBlock';
import {customerbyidGetAction} from '../../../redux/actions/restActions';
class Panelclass extends React.Component {
componentDidMount(){
const {customerbyidGet} = this.props;
customerbyidGet()
}
render() {
const { classes } = this.props;
return (
<div>
Hi
</div>
);
}
}
Panelclass.propTypes = {
classes: PropTypes.object.isRequired,
customerbyidGet: PropTypes.func.isRequired,
};
// const mapStateToProps = state => ({
// customers: customerbyidGet(state),
// })
const mapDispatchToProps = dispatch => bindActionCreators({
customerbyidGet: customerbyidGetAction
}, dispatch)
const Panel = connect(
//mapStateToProps,
null,
mapDispatchToProps
)(Panelclass);
export default withStyles(styles)(Panel);

Your reducer expects payload property in action:
function reducer(state = initialImmutableState, action) {
switch (action.type) {
case types.customerbyidGetAction:
return {
...state,
data: action.payload, // Here
};
}
}
So, you need to have that property in action creator:
const customerbyidGetAction = (data) => ({
type: types.customerbyidGetAction,
payload: data, // Here
});
Also, you need to fix the correct action import in component:
import { customerbyidGet } from "../path-to/restApi";
const mapDispatchToProps = (dispatch) =>
bindActionCreators(
{
customerbyidGet,
},
dispatch
);
PS: Today, you should use the Redux Toolkit library which reduces lots of boilerplate code.

First of all define your rest api function like below
export default function customerbyidGet(dispatch) {
return () => {
console.log("not called")
dispatch(customerbyidGetAction());
fetch(URL + 'customer/byid/Get',{
method:'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json',
'token':1234
},
body: JSON.stringify({'customerId': 1})
})
.then(res => {
const r = res.json();
return r;
})
.then(res => {
if(res.error) {
throw(res.error);
}
dispatch(customerbyidGetAction(res));
return res;
})
.catch(error => {
dispatch(customerbyidGetAction(error));
})
}
}
Then pass it to your mapDispatchToProps function
const mapDispatchToProps = dispatch => bindActionCreators({
customerbyidGetData: customerbyidGet(dispatch)
}, dispatch)
And finally`invoke it in mapDispatchToProps
componentDidMount(){
const {customerbyidGetData} = this.props;
customerbyidGetData()
}

The other two answers are pointing out good points, but missing something very crucial: That ; there is a typo.
const {customerbyidGet} = this.props;
customerbyidGet()
should be
const {customerbyidGet} = this.props.customerbyidGet()

Redux-Saga and createAction from Redux-Toolkit does not run

I have been trying to introduce redux-sagas and redux-toolkit to my project. It seems when I dispatch(fetchTweets(term)) I can see the actions firing off in the Redux DevTools. But when it gets to the saga nothing happens. Not sure how to fix it. Let me know if you have any ideas. Here is the error I am getting. Here is the link to github
file - configureAppStore.js
import { configureStore, getDefaultMiddleware } from '#reduxjs/toolkit';
import reducer from './reducer';
import toast from './middleware/toast.js';
import websocket from './middleware/websocket.js';
import createSagaMiddleware from 'redux-saga';
import tweetSagas from '../saga/tweet.js';
const configureAppStore = () => {
const sagaMiddleware = createSagaMiddleware();
const middlewares = [sagaMiddleware, websocket, toast];
const middleware = [
...getDefaultMiddleware({ thunk: false }),
...middlewares,
];
const store = configureStore({
reducer: reducer,
middleware: middleware,
});
sagaMiddleware.run(tweetSagas);
return store;
};
export default configureAppStore;
file - saga/tweet.js
import { takeEvery, call, put, fork } from 'redux-saga/effects';
import axios from 'axios';
import * as actions from '../store/action/saga.js';
const port = process.env.REACT_APP_PORT;
const hostname = process.env.REACT_APP_LOCALHOST;
const baseURL = `http://${hostname}:${port}`;
function api({ dispatch }) {
return function (next) {
return function* (action) {
if (action.type !== actions.sagaApiCallBegan.type) return next(action);
next(action); // 'sagaApiCallBegan' to show in redux dev tools
const { url, method, onSuccess, onError } = action.payload;
try {
const response = yield call(
async () =>
await axios.request({
baseURL: baseURL,
url,
method,
})
);
if (onSuccess) yield put({ type: onSuccess, payload: response.data });
} catch (error) {
if (onError) yield put({ type: onError, payload: error });
}
};
};
}
function* watchApi() {
yield takeEvery(actions.sagaApiCallBegan.type, api);
}
export default function* tweetSagas() {
yield fork(watchApi);
}
file- store/tweets.js
import { createSlice } from '#reduxjs/toolkit';
import {
sagaApiCallBegan,
sagaApiCallSuccess,
sagaApiCallFailed,
} from './action/saga';
import { webSocketCallBegan, webSocketCallFailed } from './action/websocket.js';
import { normalize } from 'normalizr';
import { tweetSchema } from '../store/Schema/tweet.js';
const initialState = () => ({
byTweetId: {},
byUserId: {},
allTweetIds: [],
});
// action, actionTypes and reducer
const slice = createSlice({
name: 'tweets',
initialState: initialState(),
// reducers
reducers: {
tweetAdded: (state, action) => {
const { entities, result } = normalize(action.payload, tweetSchema);
Object.assign(state.byTweetId, entities.byTweetId);
Object.assign(state.byUserId, entities.byUserId);
state.allTweetIds.push(result);
},
tweetStoreReseted: (state) => initialState(),
},
});
export const { tweetAdded, tweetStoreReseted } = slice.actions;
export default slice.reducer;
// Action creators
export const fetchTweets = (term) =>
sagaApiCallBegan({
url: `/setsearchterm/${term}`,
method: 'get',
onSuccess: sagaApiCallSuccess.type,
onError: sagaApiCallFailed.type,
});
export const fetchTweetsPause = () =>
sagaApiCallBegan({
url: '/pause',
method: 'GET',
onSuccess: sagaApiCallSuccess.type,
onError: sagaApiCallFailed.type,
});
export const getTweet = (message) =>
webSocketCallBegan({
message: message,
onSuccess: tweetAdded.type,
onError: webSocketCallFailed.type,
});
file - action/saga.js
import { createAction } from '#reduxjs/toolkit';
export const sagaApiCallBegan = createAction('saga/apiCallBegan');
export const sagaApiCallSuccess = createAction('saga/apiCallSuccess');
export const sagaApiCallFailed = createAction('saga/apiCallFailed');

Here is the solution
file - saga/tweet.js
import { takeEvery, call, put, fork } from 'redux-saga/effects';
import axios from 'axios';
import * as actions from '../store/action/saga.js';
const port = process.env.REACT_APP_PORT;
const hostname = process.env.REACT_APP_LOCALHOST;
const baseURL = `http://${hostname}:${port}`;
const fetchApi = async ({ baseURL, url, method }) =>
await axios.request({
baseURL: baseURL,
url: url,
method: method,
});
function* api(action) {
const { url, method, onSuccess, onError } = action.payload;
const options = {
baseURL: baseURL,
url: url,
method: method,
};
try {
const response = yield call(fetchApi, options);
if (onSuccess)
yield put({
type: onSuccess,
payload: response.data,
});
} catch (error) {
if (onError) yield put({ type: onError, payload: error });
}
}
function* watchApi() {
yield takeEvery(actions.sagaApiCallBegan.type, api);
}
export default function* tweetSagas() {
yield fork(watchApi);
}

net::ERR_CONNECTION_REFUSED when using react with redux

action.js
import Axios from 'axios';
import { PRODUCT_LIST_FAIL, PRODUCT_LIST_REQUEST, PRODUCT_LIST_SUCCESS } from '../constraints/productConstraints';
const listProducts = () => async (dispatch) => {
try {
dispatch({ type: PRODUCT_LIST_REQUEST });
const { data } = await Axios.get('http://localhost:3001/product');
dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
}
catch(error) {
dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message });
}
}
export { listProducts }
home.js
const Home = () => {
const productList = useSelector(state => state.productList);
const { products, loading, error } = productList;
const dispatch = useDispatch();
useEffect(() => {
dispatch(listProducts());
return () => {
}
},[]);
}
when I use axios.get('/product') it works but when I use axios.get('http://localhost:3001/product') it shows error GET http://localhost:3001/product net::ERR_CONNECTION_REFUSED don't why I am getting this error API is not hitting

If you haven't already done so, add "proxy": "http://localhost:3001", to your package.json in your React app.

Axios request sent twice when using React Saga

I am trying to send a GET request using axios and React Saga.
The request fired twice
This is my component file where I call the getBusinessHoursList action:
import { getBusinessHoursList } from "../../../../redux/actions";
...
...
componentDidMount() {
this.props.getBusinessHoursList(this.state.id);
}
...
...
const mapStateToProps = ({ settings }) => {
return {
settings
};
};
export default connect(
mapStateToProps,
{
getBusinessHoursList,
}
)(injectIntl(BusinessHours));
This is my service file where I use axios to get my business hours list:
setting-service.js:
import axios from '../util/api';
import { configureStore } from '../redux/store';
export const settingsService =
{
getBusinessHours,
};
function getBusinessHours() {
const store = configureStore({});
const user = JSON.parse(store.getState().authUser.user)
return axios.get("business/" + user.business.id + "/businesshours")
.then(response => {
return response.data.data
}).catch(error => {
return error.response.data
})
}
This is actions file where I define the actions
actions.js:
import {
CHANGE_LOCALE,
SETTING_GET_BUSINESS_HOURS_FAIL,
SETTING_GET_BUSINESS_HOURS_SUCCESS,
SETTING_GET_BUSINESS_HOURS,
} from '../actions';
export const getBusinessHoursList = (data) => ({
type: SETTING_GET_BUSINESS_HOURS,
payload: data
});
export const getBusinessHoursSuccess = (items) => ({
type: SETTING_GET_BUSINESS_HOURS_SUCCESS,
payload: items
});
export const getBusinessHoursFail = (error) => ({
type: SETTING_GET_BUSINESS_HOURS_FAIL,
payload: error
});
reducer.js
import {
CHANGE_LOCALE,
SETTING_GET_BUSINESS_HOURS,
SETTING_GET_BUSINESS_HOURS_FAIL,
SETTING_GET_BUSINESS_HOURS_SUCCESS
} from '../actions';
const INIT_STATE = {
errors: '',
loadingBH: false,
businessHoursItems: null
};
export default (state = INIT_STATE, action) => {
switch (action.type) {
case SETTING_GET_BUSINESS_HOURS:
return { ...state, loadingBH: false };
case SETTING_GET_BUSINESS_HOURS_SUCCESS:
return { ...state, loadingBH: true, businessHoursItems: action.payload};
case SETTING_GET_BUSINESS_HOURS_FAIL:
return { ...state, loadingBH: true, errors: action.payload };
default: return { ...state };
}
}
saga.js:
import { all, call, fork, put, takeEvery, takeLatest, take } from "redux-saga/effects";
import { getDateWithFormat } from "../../helpers/Utils";
import { settingsService } from '../../services/settings-service'
import {
SETTING_GET_BUSINESS_HOURS,
SETTING_UPDATE_BUSINESS_HOURS,
} from "../actions";
import axios from "../../util/api";
import { NotificationManager } from "../../components/common/react-notifications";
import {
getBusinessHoursSuccess,
getBusinessHoursFail,
} from "./actions";
const getServiceListRequest = async () =>
await settingsService.getBusinessHours()
.then(authUser => authUser)
.catch(error => error);
function* getBusinessHours() {
console.log('test')
try {
const response = yield call(getServiceListRequest);
yield put(getBusinessHoursSuccess(response));
} catch (error) {
yield put(getBusinessHoursFail(error));
}
}
export function* watchGetBusinessHours() {
yield takeLatest(SETTING_GET_BUSINESS_HOURS, getBusinessHours);
}
export default function* rootSaga() {
yield all([
fork(watchGetBusinessHours),
]);
}
Global sagas file : sagas.js:
import { all } from 'redux-saga/effects';
import authSagas from './auth/saga';
import settingsSagas from './settings/saga';
export default function* rootSaga(getState) {
yield all([
authSagas(),
settingsSagas(),
]);
}
The request fired successfully and I get Business hours list but the request fired twice
I tried to use takeLatest in place of takeEvery
This is the network tab