How to determine where a piece of code should go in ReduxJS?
I am following the tutorial over at https://redux.js.org/basics/usagewithreact
However, I am stuck with the following, as the author doesn't tell you where to put the following code.
I am up to "Implementing Container Components":
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
case 'SHOW_ALL':
default:
return todos
}
}
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
That is the code that needs to go in one of the created files, or maybe a new file. However the article does not state where or how to do this. I am a beginner with nodejs, reactjs & reduxjs.
reactjs react-redux
edited Dec 1 '18 at 11:01
halfer
14.6k758113
asked Nov 21 '18 at 1:01
RussellHarrowerRussellHarrower
2,5331263131
add a comment |
I am following the tutorial over at https://redux.js.org/basics/usagewithreact
However, I am stuck with the following, as the author doesn't tell you where to put the following code.
I am up to "Implementing Container Components":
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
case 'SHOW_ALL':
default:
return todos
}
}
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
That is the code that needs to go in one of the created files, or maybe a new file. However the article does not state where or how to do this. I am a beginner with nodejs, reactjs & reduxjs.
reactjs react-redux
edited Dec 1 '18 at 11:01
halfer
14.6k758113
asked Nov 21 '18 at 1:01
RussellHarrowerRussellHarrower
2,5331263131
How did you get on with the assistance provided below, Russell?
– halfer
Dec 1 '18 at 11:02
Did my answer provide enough assistance to solve your problem?
– B12Toaster
Dec 21 '18 at 16:01
add a comment |
I am following the tutorial over at https://redux.js.org/basics/usagewithreact
However, I am stuck with the following, as the author doesn't tell you where to put the following code.
I am up to "Implementing Container Components":
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
case 'SHOW_ALL':
default:
return todos
}
}
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
That is the code that needs to go in one of the created files, or maybe a new file. However the article does not state where or how to do this. I am a beginner with nodejs, reactjs & reduxjs.
reactjs react-redux
edited Dec 1 '18 at 11:01
halfer
14.6k758113
asked Nov 21 '18 at 1:01
RussellHarrowerRussellHarrower
2,5331263131
I am following the tutorial over at https://redux.js.org/basics/usagewithreact
However, I am stuck with the following, as the author doesn't tell you where to put the following code.
I am up to "Implementing Container Components":
const getVisibleTodos = (todos, filter) => {
switch (filter) {
case 'SHOW_COMPLETED':
return todos.filter(t => t.completed)
case 'SHOW_ACTIVE':
return todos.filter(t => !t.completed)
case 'SHOW_ALL':
default:
return todos
}
}
const mapStateToProps = state => {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
That is the code that needs to go in one of the created files, or maybe a new file. However the article does not state where or how to do this. I am a beginner with nodejs, reactjs & reduxjs.
reactjs react-redux
reactjs react-redux
edited Dec 1 '18 at 11:01
halfer
14.6k758113
asked Nov 21 '18 at 1:01
RussellHarrowerRussellHarrower
2,5331263131
edited Dec 1 '18 at 11:01
halfer
14.6k758113
asked Nov 21 '18 at 1:01
RussellHarrowerRussellHarrower
2,5331263131
edited Dec 1 '18 at 11:01
halfer
14.6k758113
edited Dec 1 '18 at 11:01
halfer
14.6k758113
edited Dec 1 '18 at 11:01
halfer
14.6k758113
14.6k758113
asked Nov 21 '18 at 1:01
RussellHarrowerRussellHarrower
2,5331263131
asked Nov 21 '18 at 1:01
RussellHarrowerRussellHarrower
2,5331263131
asked Nov 21 '18 at 1:01
RussellHarrowerRussellHarrower
2,5331263131
2,5331263131
How did you get on with the assistance provided below, Russell?
– halfer
Dec 1 '18 at 11:02
Did my answer provide enough assistance to solve your problem?
– B12Toaster
Dec 21 '18 at 16:01
add a comment |
How did you get on with the assistance provided below, Russell?
– halfer
Dec 1 '18 at 11:02
Did my answer provide enough assistance to solve your problem?
– B12Toaster
Dec 21 '18 at 16:01
How did you get on with the assistance provided below, Russell?
– halfer
Dec 1 '18 at 11:02
How did you get on with the assistance provided below, Russell?
– halfer
Dec 1 '18 at 11:02
Did my answer provide enough assistance to solve your problem?
– B12Toaster
Dec 21 '18 at 16:01
Did my answer provide enough assistance to solve your problem?
– B12Toaster
Dec 21 '18 at 16:01
add a comment |
2 Answers
2
active
oldest
votes
This code definitely goes into your component. More precisely, if you separate your components into presentational components and containers this should go into your container.
To use connect(), you need to define a special function called mapStateToProps that describes how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping.
As you can see in the example, the snippet has a mapStateToProps function.
The getVisibleTodos is merely a "selector" to transfer the state into something your component can use. Have a look at the reselect library for more advanced means of selecting/caching/assembling redux-store values.
Here you find a few github projects corresponding to the examples described on redux.js.org. For example the todos example repo. Have a look how the project is structured and where the code goes exactly.
answered Dec 1 '18 at 12:43
B12ToasterB12Toaster
2,27221524
add a comment |
It's supposed to go in the reducer file.
You might want to check out the full documentation here about the usage of redux reducer.
It contains different tutorials, but might help you solve the one in the docs page.
answered Nov 21 '18 at 1:50
Hilal ArsaHilal Arsa
5810
1
The switch case in the code above indeed resembles a reducer, but it is not :)
– B12Toaster
Dec 1 '18 at 12:53
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%2f53403868%2fhow-to-determine-where-a-piece-of-code-should-go-in-reduxjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This code definitely goes into your component. More precisely, if you separate your components into presentational components and containers this should go into your container.
To use connect(), you need to define a special function called mapStateToProps that describes how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping.
As you can see in the example, the snippet has a mapStateToProps function.
The getVisibleTodos is merely a "selector" to transfer the state into something your component can use. Have a look at the reselect library for more advanced means of selecting/caching/assembling redux-store values.
Here you find a few github projects corresponding to the examples described on redux.js.org. For example the todos example repo. Have a look how the project is structured and where the code goes exactly.
answered Dec 1 '18 at 12:43
B12ToasterB12Toaster
2,27221524
add a comment |
This code definitely goes into your component. More precisely, if you separate your components into presentational components and containers this should go into your container.
To use connect(), you need to define a special function called mapStateToProps that describes how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping.
As you can see in the example, the snippet has a mapStateToProps function.
The getVisibleTodos is merely a "selector" to transfer the state into something your component can use. Have a look at the reselect library for more advanced means of selecting/caching/assembling redux-store values.
Here you find a few github projects corresponding to the examples described on redux.js.org. For example the todos example repo. Have a look how the project is structured and where the code goes exactly.
answered Dec 1 '18 at 12:43
B12ToasterB12Toaster
2,27221524
add a comment |
This code definitely goes into your component. More precisely, if you separate your components into presentational components and containers this should go into your container.
To use connect(), you need to define a special function called mapStateToProps that describes how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping.
As you can see in the example, the snippet has a mapStateToProps function.
The getVisibleTodos is merely a "selector" to transfer the state into something your component can use. Have a look at the reselect library for more advanced means of selecting/caching/assembling redux-store values.
Here you find a few github projects corresponding to the examples described on redux.js.org. For example the todos example repo. Have a look how the project is structured and where the code goes exactly.
answered Dec 1 '18 at 12:43
B12ToasterB12Toaster
2,27221524
This code definitely goes into your component. More precisely, if you separate your components into presentational components and containers this should go into your container.
To use connect(), you need to define a special function called mapStateToProps that describes how to transform the current Redux store state into the props you want to pass to a presentational component you are wrapping.
As you can see in the example, the snippet has a mapStateToProps function.
The getVisibleTodos is merely a "selector" to transfer the state into something your component can use. Have a look at the reselect library for more advanced means of selecting/caching/assembling redux-store values.
Here you find a few github projects corresponding to the examples described on redux.js.org. For example the todos example repo. Have a look how the project is structured and where the code goes exactly.
answered Dec 1 '18 at 12:43
B12ToasterB12Toaster
2,27221524
edited Dec 1 '18 at 12:59
answered Dec 1 '18 at 12:43
B12ToasterB12Toaster
2,27221524
answered Dec 1 '18 at 12:43
B12ToasterB12Toaster
2,27221524
answered Dec 1 '18 at 12:43
B12ToasterB12Toaster
2,27221524
2,27221524
add a comment |
add a comment |
It's supposed to go in the reducer file.
You might want to check out the full documentation here about the usage of redux reducer.
It contains different tutorials, but might help you solve the one in the docs page.
answered Nov 21 '18 at 1:50
Hilal ArsaHilal Arsa
5810
1
The switch case in the code above indeed resembles a reducer, but it is not :)
– B12Toaster
Dec 1 '18 at 12:53
add a comment |
It's supposed to go in the reducer file.
You might want to check out the full documentation here about the usage of redux reducer.
It contains different tutorials, but might help you solve the one in the docs page.
answered Nov 21 '18 at 1:50
Hilal ArsaHilal Arsa
5810
1
The switch case in the code above indeed resembles a reducer, but it is not :)
– B12Toaster
Dec 1 '18 at 12:53
add a comment |
It's supposed to go in the reducer file.
You might want to check out the full documentation here about the usage of redux reducer.
It contains different tutorials, but might help you solve the one in the docs page.
answered Nov 21 '18 at 1:50
Hilal ArsaHilal Arsa
5810
It's supposed to go in the reducer file.
You might want to check out the full documentation here about the usage of redux reducer.
It contains different tutorials, but might help you solve the one in the docs page.
answered Nov 21 '18 at 1:50
Hilal ArsaHilal Arsa
5810
answered Nov 21 '18 at 1:50
Hilal ArsaHilal Arsa
5810
answered Nov 21 '18 at 1:50
Hilal ArsaHilal Arsa
5810
answered Nov 21 '18 at 1:50
Hilal ArsaHilal Arsa
5810
5810
1
The switch case in the code above indeed resembles a reducer, but it is not :)
– B12Toaster
Dec 1 '18 at 12:53
add a comment |
1
The switch case in the code above indeed resembles a reducer, but it is not :)
– B12Toaster
Dec 1 '18 at 12:53
1
1
The switch case in the code above indeed resembles a reducer, but it is not :)
– B12Toaster
Dec 1 '18 at 12:53
The switch case in the code above indeed resembles a reducer, but it is not :)
– B12Toaster
Dec 1 '18 at 12:53
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%2f53403868%2fhow-to-determine-where-a-piece-of-code-should-go-in-reduxjs%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
How did you get on with the assistance provided below, Russell?
– halfer
Dec 1 '18 at 11:02
Did my answer provide enough assistance to solve your problem?
– B12Toaster
Dec 21 '18 at 16:01