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.

edited Dec 1 '18 at 11:01

halfer

14.6k758113

asked Nov 21 '18 at 1:01

RussellHarrower

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.

edited Dec 1 '18 at 11:01

halfer

14.6k758113

asked Nov 21 '18 at 1:01

RussellHarrower

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.

edited Dec 1 '18 at 11:01

halfer

14.6k758113

asked Nov 21 '18 at 1:01

RussellHarrower

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

edited Dec 1 '18 at 11:01

halfer

14.6k758113

asked Nov 21 '18 at 1:01

RussellHarrower

2,5331263131

edited Dec 1 '18 at 11:01

halfer

14.6k758113

asked Nov 21 '18 at 1:01

RussellHarrower

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

asked Nov 21 '18 at 1:01

RussellHarrower

2,5331263131

asked Nov 21 '18 at 1:01

RussellHarrower

2,5331263131

asked Nov 21 '18 at 1:01

RussellHarrower

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

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.

edited Dec 1 '18 at 12:59

answered Dec 1 '18 at 12:43

B12Toaster

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 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
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

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.

edited Dec 1 '18 at 12:59

answered Dec 1 '18 at 12:43

B12Toaster

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.

edited Dec 1 '18 at 12:59

answered Dec 1 '18 at 12:43

B12Toaster

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.

edited Dec 1 '18 at 12:59

answered Dec 1 '18 at 12:43

B12Toaster

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.

edited Dec 1 '18 at 12:59

answered Dec 1 '18 at 12:43

B12Toaster

2,27221524

edited Dec 1 '18 at 12:59

answered Dec 1 '18 at 12:43

B12Toaster

2,27221524

answered Dec 1 '18 at 12:43

B12Toaster

2,27221524

answered Dec 1 '18 at 12:43

B12Toaster

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 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 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 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 Arsa

5810

answered Nov 21 '18 at 1:50

Hilal Arsa

5810

answered Nov 21 '18 at 1:50

Hilal Arsa

5810

answered Nov 21 '18 at 1:50

Hilal 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 |

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 |

draft saved

draft discarded

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.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Cfrgtkky