Mixing
React Redux: Update and replace records with another records returns value of 1
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
React Redux: Update and replace records with another records returns value of 1.
On the server side, I have a json response [{"id":"10", "food_name":"Rice"}]
The code below works fine by displaying a food item called Rice from the database via API Call as showed in the json array above.
Now I have a requirements to replace the displayed food item Rice with Beans.
To this effect, I have a json files which is to be returned via API Call after posting
[{"id":"10", "food_name":"Beans"}]
I have also created a Post button which should send data to the server side and return the response Beans.
Here is my effort as well as my Issue which is caused by reducer.
If Implement the code below in the reducer
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
//return { ...food1, food_name: state.items[0].food_name};
return { ...food1, food_name: 'Beans' };
}
The Code works fine and Rice is replaced with Beans since I set value beans in the reducer.
but since I need to get the records via API Call so if implement
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
}
Am getting value of 1 replacing Rice instead of Beans. Please where is this value of 1 coming from.
I need to have beans replace record Rice as a value returned from API Call.
My action and service code are okay as I can see the json returned records in the array as per
[{"id":"10", "food_name":"Beans"}]
I think my problem lies in this line of code below which returns value of 1 instaed of Beans.
return { ...food1, food_name: state.items[0].food_name};
Here is the full code
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { foodActions } from 'actions';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.props.dispatch(foodActions.getFood());
}
handleFood(id,food_type) {
return (e) => this.props.dispatch(foodActions.postfood(food_id));
}
render() {
const { food1, foods1 } = this.props;
return (
<div>
{foods1.items &&
<ul>
{foods1.items.map((food1, index1) =>
<li key={food1.id}>
{food1.food_name}
<input type="button" value="Post and Update Food Name" onClick={this.handleFood(food1.id)} />
</li>
)}
</ul>
}
</div>
);
}
}
function mapStateToProps(state) {
const { foods1} = state;
const { food1 } = state;
return {
food1, foods1
};
}
const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };
Reducer Code
import { foodConstants } from '/constants';
export function foods1(state = {}, action) {
switch (action.type) {
case foodConstants.GETALL_REQUEST:
return {loading: true};
case foodConstants.GETALL_SUCCESS:
return {
loading: false,
error: null,
items: action.foods1,
};
case foodConstants.GETALL_FAILURE:
return {
error: action.error
};
// Post and Update Food Name
case foodConstants.FOOD_REQUEST_POST:
return {...state};
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
}
return food1;
})
};
case foodConstants.FOOD_FAILURE_POST:
return {
error: action.error
};
default:
return state
}
}
reactjs redux
asked Dec 23 '18 at 21:59
jmarkattijmarkatti
19419
add a comment |
React Redux: Update and replace records with another records returns value of 1.
On the server side, I have a json response [{"id":"10", "food_name":"Rice"}]
The code below works fine by displaying a food item called Rice from the database via API Call as showed in the json array above.
Now I have a requirements to replace the displayed food item Rice with Beans.
To this effect, I have a json files which is to be returned via API Call after posting
[{"id":"10", "food_name":"Beans"}]
I have also created a Post button which should send data to the server side and return the response Beans.
Here is my effort as well as my Issue which is caused by reducer.
If Implement the code below in the reducer
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
//return { ...food1, food_name: state.items[0].food_name};
return { ...food1, food_name: 'Beans' };
}
The Code works fine and Rice is replaced with Beans since I set value beans in the reducer.
but since I need to get the records via API Call so if implement
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
}
Am getting value of 1 replacing Rice instead of Beans. Please where is this value of 1 coming from.
I need to have beans replace record Rice as a value returned from API Call.
My action and service code are okay as I can see the json returned records in the array as per
[{"id":"10", "food_name":"Beans"}]
I think my problem lies in this line of code below which returns value of 1 instaed of Beans.
return { ...food1, food_name: state.items[0].food_name};
Here is the full code
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { foodActions } from 'actions';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.props.dispatch(foodActions.getFood());
}
handleFood(id,food_type) {
return (e) => this.props.dispatch(foodActions.postfood(food_id));
}
render() {
const { food1, foods1 } = this.props;
return (
<div>
{foods1.items &&
<ul>
{foods1.items.map((food1, index1) =>
<li key={food1.id}>
{food1.food_name}
<input type="button" value="Post and Update Food Name" onClick={this.handleFood(food1.id)} />
</li>
)}
</ul>
}
</div>
);
}
}
function mapStateToProps(state) {
const { foods1} = state;
const { food1 } = state;
return {
food1, foods1
};
}
const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };
Reducer Code
import { foodConstants } from '/constants';
export function foods1(state = {}, action) {
switch (action.type) {
case foodConstants.GETALL_REQUEST:
return {loading: true};
case foodConstants.GETALL_SUCCESS:
return {
loading: false,
error: null,
items: action.foods1,
};
case foodConstants.GETALL_FAILURE:
return {
error: action.error
};
// Post and Update Food Name
case foodConstants.FOOD_REQUEST_POST:
return {...state};
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
}
return food1;
})
};
case foodConstants.FOOD_FAILURE_POST:
return {
error: action.error
};
default:
return state
}
}
reactjs redux
asked Dec 23 '18 at 21:59
jmarkattijmarkatti
19419
Please great Stackoverflow Engineers, any solution or suggestions will be highly appreciated. Am counting on you guys
– jmarkatti
Dec 24 '18 at 5:35
add a comment |
React Redux: Update and replace records with another records returns value of 1.
On the server side, I have a json response [{"id":"10", "food_name":"Rice"}]
The code below works fine by displaying a food item called Rice from the database via API Call as showed in the json array above.
Now I have a requirements to replace the displayed food item Rice with Beans.
To this effect, I have a json files which is to be returned via API Call after posting
[{"id":"10", "food_name":"Beans"}]
I have also created a Post button which should send data to the server side and return the response Beans.
Here is my effort as well as my Issue which is caused by reducer.
If Implement the code below in the reducer
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
//return { ...food1, food_name: state.items[0].food_name};
return { ...food1, food_name: 'Beans' };
}
The Code works fine and Rice is replaced with Beans since I set value beans in the reducer.
but since I need to get the records via API Call so if implement
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
}
Am getting value of 1 replacing Rice instead of Beans. Please where is this value of 1 coming from.
I need to have beans replace record Rice as a value returned from API Call.
My action and service code are okay as I can see the json returned records in the array as per
[{"id":"10", "food_name":"Beans"}]
I think my problem lies in this line of code below which returns value of 1 instaed of Beans.
return { ...food1, food_name: state.items[0].food_name};
Here is the full code
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { foodActions } from 'actions';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.props.dispatch(foodActions.getFood());
}
handleFood(id,food_type) {
return (e) => this.props.dispatch(foodActions.postfood(food_id));
}
render() {
const { food1, foods1 } = this.props;
return (
<div>
{foods1.items &&
<ul>
{foods1.items.map((food1, index1) =>
<li key={food1.id}>
{food1.food_name}
<input type="button" value="Post and Update Food Name" onClick={this.handleFood(food1.id)} />
</li>
)}
</ul>
}
</div>
);
}
}
function mapStateToProps(state) {
const { foods1} = state;
const { food1 } = state;
return {
food1, foods1
};
}
const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };
Reducer Code
import { foodConstants } from '/constants';
export function foods1(state = {}, action) {
switch (action.type) {
case foodConstants.GETALL_REQUEST:
return {loading: true};
case foodConstants.GETALL_SUCCESS:
return {
loading: false,
error: null,
items: action.foods1,
};
case foodConstants.GETALL_FAILURE:
return {
error: action.error
};
// Post and Update Food Name
case foodConstants.FOOD_REQUEST_POST:
return {...state};
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
}
return food1;
})
};
case foodConstants.FOOD_FAILURE_POST:
return {
error: action.error
};
default:
return state
}
}
reactjs redux
asked Dec 23 '18 at 21:59
jmarkattijmarkatti
19419
React Redux: Update and replace records with another records returns value of 1.
On the server side, I have a json response [{"id":"10", "food_name":"Rice"}]
The code below works fine by displaying a food item called Rice from the database via API Call as showed in the json array above.
Now I have a requirements to replace the displayed food item Rice with Beans.
To this effect, I have a json files which is to be returned via API Call after posting
[{"id":"10", "food_name":"Beans"}]
I have also created a Post button which should send data to the server side and return the response Beans.
Here is my effort as well as my Issue which is caused by reducer.
If Implement the code below in the reducer
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
//return { ...food1, food_name: state.items[0].food_name};
return { ...food1, food_name: 'Beans' };
}
The Code works fine and Rice is replaced with Beans since I set value beans in the reducer.
but since I need to get the records via API Call so if implement
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
}
Am getting value of 1 replacing Rice instead of Beans. Please where is this value of 1 coming from.
I need to have beans replace record Rice as a value returned from API Call.
My action and service code are okay as I can see the json returned records in the array as per
[{"id":"10", "food_name":"Beans"}]
I think my problem lies in this line of code below which returns value of 1 instaed of Beans.
return { ...food1, food_name: state.items[0].food_name};
Here is the full code
import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { foodActions } from 'actions';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
this.props.dispatch(foodActions.getFood());
}
handleFood(id,food_type) {
return (e) => this.props.dispatch(foodActions.postfood(food_id));
}
render() {
const { food1, foods1 } = this.props;
return (
<div>
{foods1.items &&
<ul>
{foods1.items.map((food1, index1) =>
<li key={food1.id}>
{food1.food_name}
<input type="button" value="Post and Update Food Name" onClick={this.handleFood(food1.id)} />
</li>
)}
</ul>
}
</div>
);
}
}
function mapStateToProps(state) {
const { foods1} = state;
const { food1 } = state;
return {
food1, foods1
};
}
const connectedApp = connect(mapStateToProps)(App);
export { connectedApp as App };
Reducer Code
import { foodConstants } from '/constants';
export function foods1(state = {}, action) {
switch (action.type) {
case foodConstants.GETALL_REQUEST:
return {loading: true};
case foodConstants.GETALL_SUCCESS:
return {
loading: false,
error: null,
items: action.foods1,
};
case foodConstants.GETALL_FAILURE:
return {
error: action.error
};
// Post and Update Food Name
case foodConstants.FOOD_REQUEST_POST:
return {...state};
case foodConstants.FOOD_SUCCESS_POST:
return {
items: state.items.map(food1 => {
if (food1.id === action.id) {
return { ...food1, food_name: state.items[0].food_name};
}
return food1;
})
};
case foodConstants.FOOD_FAILURE_POST:
return {
error: action.error
};
default:
return state
}
}
reactjs redux
reactjs redux
asked Dec 23 '18 at 21:59
jmarkattijmarkatti
19419
asked Dec 23 '18 at 21:59
jmarkattijmarkatti
19419
asked Dec 23 '18 at 21:59
jmarkattijmarkatti
19419
asked Dec 23 '18 at 21:59
jmarkattijmarkatti
19419
asked Dec 23 '18 at 21:59
jmarkattijmarkatti
19419
19419
Please great Stackoverflow Engineers, any solution or suggestions will be highly appreciated. Am counting on you guys
– jmarkatti
Dec 24 '18 at 5:35
add a comment |
Please great Stackoverflow Engineers, any solution or suggestions will be highly appreciated. Am counting on you guys
– jmarkatti
Dec 24 '18 at 5:35
Please great Stackoverflow Engineers, any solution or suggestions will be highly appreciated. Am counting on you guys
– jmarkatti
Dec 24 '18 at 5:35
Please great Stackoverflow Engineers, any solution or suggestions will be highly appreciated. Am counting on you guys
– jmarkatti
Dec 24 '18 at 5:35
add a comment |
1 Answer
1
active
oldest
votes
You need to replace value that is coming in action, but you are picking from state
case foodConstants.FOOD_SUCCESS_POST: {
const updatedItems = state.items.map((food1) => {
if (food1.id === action.id) {
return { ...action };
}
return food1;
});
return { ...state, items: updatedItems };
}
Or you can do this as well
case foodConstants.FOOD_SUCCESS_POST: {
let updatedItems = { ...state.items };
const itemIndex = updatedItems.findIndex((food1) => food1.id === action.id);
if(itemIndex > -1){
updatedItems[itemIndex] = {
...updatedItems[itemIndex],
...action,
}
}
return { ...state, items: updatedItems };
}
answered Jan 3 at 6:22
ma_dev_15ma_dev_15
432212
Hope I was not late for answer :)
– ma_dev_15
Jan 3 at 6:29
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53907454%2freact-redux-update-and-replace-records-with-another-records-returns-value-of-1%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to replace value that is coming in action, but you are picking from state
case foodConstants.FOOD_SUCCESS_POST: {
const updatedItems = state.items.map((food1) => {
if (food1.id === action.id) {
return { ...action };
}
return food1;
});
return { ...state, items: updatedItems };
}
Or you can do this as well
case foodConstants.FOOD_SUCCESS_POST: {
let updatedItems = { ...state.items };
const itemIndex = updatedItems.findIndex((food1) => food1.id === action.id);
if(itemIndex > -1){
updatedItems[itemIndex] = {
...updatedItems[itemIndex],
...action,
}
}
return { ...state, items: updatedItems };
}
answered Jan 3 at 6:22
ma_dev_15ma_dev_15
432212
Hope I was not late for answer :)
– ma_dev_15
Jan 3 at 6:29
add a comment |
You need to replace value that is coming in action, but you are picking from state
case foodConstants.FOOD_SUCCESS_POST: {
const updatedItems = state.items.map((food1) => {
if (food1.id === action.id) {
return { ...action };
}
return food1;
});
return { ...state, items: updatedItems };
}
Or you can do this as well
case foodConstants.FOOD_SUCCESS_POST: {
let updatedItems = { ...state.items };
const itemIndex = updatedItems.findIndex((food1) => food1.id === action.id);
if(itemIndex > -1){
updatedItems[itemIndex] = {
...updatedItems[itemIndex],
...action,
}
}
return { ...state, items: updatedItems };
}
answered Jan 3 at 6:22
ma_dev_15ma_dev_15
432212
Hope I was not late for answer :)
– ma_dev_15
Jan 3 at 6:29
add a comment |
You need to replace value that is coming in action, but you are picking from state
case foodConstants.FOOD_SUCCESS_POST: {
const updatedItems = state.items.map((food1) => {
if (food1.id === action.id) {
return { ...action };
}
return food1;
});
return { ...state, items: updatedItems };
}
Or you can do this as well
case foodConstants.FOOD_SUCCESS_POST: {
let updatedItems = { ...state.items };
const itemIndex = updatedItems.findIndex((food1) => food1.id === action.id);
if(itemIndex > -1){
updatedItems[itemIndex] = {
...updatedItems[itemIndex],
...action,
}
}
return { ...state, items: updatedItems };
}
answered Jan 3 at 6:22
ma_dev_15ma_dev_15
432212
You need to replace value that is coming in action, but you are picking from state
case foodConstants.FOOD_SUCCESS_POST: {
const updatedItems = state.items.map((food1) => {
if (food1.id === action.id) {
return { ...action };
}
return food1;
});
return { ...state, items: updatedItems };
}
Or you can do this as well
case foodConstants.FOOD_SUCCESS_POST: {
let updatedItems = { ...state.items };
const itemIndex = updatedItems.findIndex((food1) => food1.id === action.id);
if(itemIndex > -1){
updatedItems[itemIndex] = {
...updatedItems[itemIndex],
...action,
}
}
return { ...state, items: updatedItems };
}
answered Jan 3 at 6:22
ma_dev_15ma_dev_15
432212
edited Jan 3 at 6:27
answered Jan 3 at 6:22
ma_dev_15ma_dev_15
432212
answered Jan 3 at 6:22
ma_dev_15ma_dev_15
432212
answered Jan 3 at 6:22
ma_dev_15ma_dev_15
432212
432212
Hope I was not late for answer :)
– ma_dev_15
Jan 3 at 6:29
add a comment |
Hope I was not late for answer :)
– ma_dev_15
Jan 3 at 6:29
Hope I was not late for answer :)
– ma_dev_15
Jan 3 at 6:29
Hope I was not late for answer :)
– ma_dev_15
Jan 3 at 6:29
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53907454%2freact-redux-update-and-replace-records-with-another-records-returns-value-of-1%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Please great Stackoverflow Engineers, any solution or suggestions will be highly appreciated. Am counting on you guys
– jmarkatti
Dec 24 '18 at 5:35