React-redux - Call action with new state after other action updated state
I have an array of objects that can be updated by appending new elements to the array with the action function addNewCategory(category)
After the new category appended to the array, I want to rebuild a tree view that I created. The tree view uses the redux store object tree.
The tree gets build inside the action function buildCategoriesTree
Here are the functions:
export function addNewCategory(category) {
return {
type: ADD_NEW_CATEGORY,
payload: category
}
}
export function buildCategoriesTree(feecategories) {
let cats = feecategories.map(x => ({...x}));
let categories = {
name: 'Kategorien',
toggled: true,
children:
buildTreeFromCategories(cats)
};
return {
type: GET_CATEGORIES_TREE,
payload: categories
}
}
Now the problem is: when I call the buildCategoriesTree(...) function after the addNewCategory(...) function. The tree doesn't update. When I add another category, the tree updates with the category I added before. So it is alway one step behind.
How is it possible that the second function "waits" until the store is up to date? I read about react-thunk, but I don't know if this is the correct solution for this kind of problem?
Thanks a lot!
reactjs redux react-redux
asked Nov 23 '18 at 23:42
Mike_NotGuiltyMike_NotGuilty
1,10941842
|
show 1 more comment
I have an array of objects that can be updated by appending new elements to the array with the action function addNewCategory(category)
After the new category appended to the array, I want to rebuild a tree view that I created. The tree view uses the redux store object tree.
The tree gets build inside the action function buildCategoriesTree
Here are the functions:
export function addNewCategory(category) {
return {
type: ADD_NEW_CATEGORY,
payload: category
}
}
export function buildCategoriesTree(feecategories) {
let cats = feecategories.map(x => ({...x}));
let categories = {
name: 'Kategorien',
toggled: true,
children:
buildTreeFromCategories(cats)
};
return {
type: GET_CATEGORIES_TREE,
payload: categories
}
}
Now the problem is: when I call the buildCategoriesTree(...) function after the addNewCategory(...) function. The tree doesn't update. When I add another category, the tree updates with the category I added before. So it is alway one step behind.
How is it possible that the second function "waits" until the store is up to date? I read about react-thunk, but I don't know if this is the correct solution for this kind of problem?
Thanks a lot!
reactjs redux react-redux
asked Nov 23 '18 at 23:42
Mike_NotGuiltyMike_NotGuilty
1,10941842
Why shouldn't the reducer react to theADD_NEW_CATEGORYand create the categories tree instead of dispatching another action? And even a better approach would have been to use a selector to create the categories tree whenever the categories change.
– Ori Drori
Nov 23 '18 at 23:46
because to build the tree I need allCategories array from the store. The addNewCategory action only has the new category as a parameter.
– Mike_NotGuilty
Nov 23 '18 at 23:50
However, the reducer has the state, and it can build the tree. In addition, you are storing a category twice (once as a category, and second in the derived tree), and you can use a selector to get the derived tree without storing it.
– Ori Drori
Nov 23 '18 at 23:51
I read that I shouldn't add logic to the reducer. Can you show me what you mean with using a selector?
– Mike_NotGuilty
Nov 23 '18 at 23:53
It's not logic, just state creation. However, I agree that you shouldn't do that in the reducer but for other reasons.
– Ori Drori
Nov 23 '18 at 23:53
|
show 1 more comment
I have an array of objects that can be updated by appending new elements to the array with the action function addNewCategory(category)
After the new category appended to the array, I want to rebuild a tree view that I created. The tree view uses the redux store object tree.
The tree gets build inside the action function buildCategoriesTree
Here are the functions:
export function addNewCategory(category) {
return {
type: ADD_NEW_CATEGORY,
payload: category
}
}
export function buildCategoriesTree(feecategories) {
let cats = feecategories.map(x => ({...x}));
let categories = {
name: 'Kategorien',
toggled: true,
children:
buildTreeFromCategories(cats)
};
return {
type: GET_CATEGORIES_TREE,
payload: categories
}
}
Now the problem is: when I call the buildCategoriesTree(...) function after the addNewCategory(...) function. The tree doesn't update. When I add another category, the tree updates with the category I added before. So it is alway one step behind.
How is it possible that the second function "waits" until the store is up to date? I read about react-thunk, but I don't know if this is the correct solution for this kind of problem?
Thanks a lot!
reactjs redux react-redux
asked Nov 23 '18 at 23:42
Mike_NotGuiltyMike_NotGuilty
1,10941842
I have an array of objects that can be updated by appending new elements to the array with the action function addNewCategory(category)
After the new category appended to the array, I want to rebuild a tree view that I created. The tree view uses the redux store object tree.
The tree gets build inside the action function buildCategoriesTree
Here are the functions:
export function addNewCategory(category) {
return {
type: ADD_NEW_CATEGORY,
payload: category
}
}
export function buildCategoriesTree(feecategories) {
let cats = feecategories.map(x => ({...x}));
let categories = {
name: 'Kategorien',
toggled: true,
children:
buildTreeFromCategories(cats)
};
return {
type: GET_CATEGORIES_TREE,
payload: categories
}
}
Now the problem is: when I call the buildCategoriesTree(...) function after the addNewCategory(...) function. The tree doesn't update. When I add another category, the tree updates with the category I added before. So it is alway one step behind.
How is it possible that the second function "waits" until the store is up to date? I read about react-thunk, but I don't know if this is the correct solution for this kind of problem?
Thanks a lot!
reactjs redux react-redux
reactjs redux react-redux
asked Nov 23 '18 at 23:42
Mike_NotGuiltyMike_NotGuilty
1,10941842
asked Nov 23 '18 at 23:42
Mike_NotGuiltyMike_NotGuilty
1,10941842
edited Nov 23 '18 at 23:50
Mike_NotGuilty
asked Nov 23 '18 at 23:42
Mike_NotGuiltyMike_NotGuilty
1,10941842
asked Nov 23 '18 at 23:42
Mike_NotGuiltyMike_NotGuilty
1,10941842
asked Nov 23 '18 at 23:42
Mike_NotGuiltyMike_NotGuilty
1,10941842
1,10941842
Why shouldn't the reducer react to theADD_NEW_CATEGORYand create the categories tree instead of dispatching another action? And even a better approach would have been to use a selector to create the categories tree whenever the categories change.
– Ori Drori
Nov 23 '18 at 23:46
because to build the tree I need allCategories array from the store. The addNewCategory action only has the new category as a parameter.
– Mike_NotGuilty
Nov 23 '18 at 23:50
However, the reducer has the state, and it can build the tree. In addition, you are storing a category twice (once as a category, and second in the derived tree), and you can use a selector to get the derived tree without storing it.
– Ori Drori
Nov 23 '18 at 23:51
I read that I shouldn't add logic to the reducer. Can you show me what you mean with using a selector?
– Mike_NotGuilty
Nov 23 '18 at 23:53
It's not logic, just state creation. However, I agree that you shouldn't do that in the reducer but for other reasons.
– Ori Drori
Nov 23 '18 at 23:53
|
show 1 more comment
Why shouldn't the reducer react to theADD_NEW_CATEGORYand create the categories tree instead of dispatching another action? And even a better approach would have been to use a selector to create the categories tree whenever the categories change.
– Ori Drori
Nov 23 '18 at 23:46
because to build the tree I need allCategories array from the store. The addNewCategory action only has the new category as a parameter.
– Mike_NotGuilty
Nov 23 '18 at 23:50
However, the reducer has the state, and it can build the tree. In addition, you are storing a category twice (once as a category, and second in the derived tree), and you can use a selector to get the derived tree without storing it.
– Ori Drori
Nov 23 '18 at 23:51
I read that I shouldn't add logic to the reducer. Can you show me what you mean with using a selector?
– Mike_NotGuilty
Nov 23 '18 at 23:53
It's not logic, just state creation. However, I agree that you shouldn't do that in the reducer but for other reasons.
– Ori Drori
Nov 23 '18 at 23:53
Why shouldn't the reducer react to the
ADD_NEW_CATEGORY and create the categories tree instead of dispatching another action? And even a better approach would have been to use a selector to create the categories tree whenever the categories change.– Ori Drori
Nov 23 '18 at 23:46
Why shouldn't the reducer react to the
ADD_NEW_CATEGORY and create the categories tree instead of dispatching another action? And even a better approach would have been to use a selector to create the categories tree whenever the categories change.– Ori Drori
Nov 23 '18 at 23:46
because to build the tree I need allCategories array from the store. The addNewCategory action only has the new category as a parameter.
– Mike_NotGuilty
Nov 23 '18 at 23:50
because to build the tree I need allCategories array from the store. The addNewCategory action only has the new category as a parameter.
– Mike_NotGuilty
Nov 23 '18 at 23:50
However, the reducer has the state, and it can build the tree. In addition, you are storing a category twice (once as a category, and second in the derived tree), and you can use a selector to get the derived tree without storing it.
– Ori Drori
Nov 23 '18 at 23:51
However, the reducer has the state, and it can build the tree. In addition, you are storing a category twice (once as a category, and second in the derived tree), and you can use a selector to get the derived tree without storing it.
– Ori Drori
Nov 23 '18 at 23:51
I read that I shouldn't add logic to the reducer. Can you show me what you mean with using a selector?
– Mike_NotGuilty
Nov 23 '18 at 23:53
I read that I shouldn't add logic to the reducer. Can you show me what you mean with using a selector?
– Mike_NotGuilty
Nov 23 '18 at 23:53
It's not logic, just state creation. However, I agree that you shouldn't do that in the reducer but for other reasons.
– Ori Drori
Nov 23 '18 at 23:53
It's not logic, just state creation. However, I agree that you shouldn't do that in the reducer but for other reasons.
– Ori Drori
Nov 23 '18 at 23:53
|
show 1 more comment
0
active
oldest
votes
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%2f53453945%2freact-redux-call-action-with-new-state-after-other-action-updated-state%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53453945%2freact-redux-call-action-with-new-state-after-other-action-updated-state%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
Why shouldn't the reducer react to the
ADD_NEW_CATEGORYand create the categories tree instead of dispatching another action? And even a better approach would have been to use a selector to create the categories tree whenever the categories change.– Ori Drori
Nov 23 '18 at 23:46
because to build the tree I need allCategories array from the store. The addNewCategory action only has the new category as a parameter.
– Mike_NotGuilty
Nov 23 '18 at 23:50
However, the reducer has the state, and it can build the tree. In addition, you are storing a category twice (once as a category, and second in the derived tree), and you can use a selector to get the derived tree without storing it.
– Ori Drori
Nov 23 '18 at 23:51
I read that I shouldn't add logic to the reducer. Can you show me what you mean with using a selector?
– Mike_NotGuilty
Nov 23 '18 at 23:53
It's not logic, just state creation. However, I agree that you shouldn't do that in the reducer but for other reasons.
– Ori Drori
Nov 23 '18 at 23:53