CODEWITHSUNDEEP
reactjsreact-redux
RussellHarrower
RussellHarrower

Reputation: 6810

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.

Upvotes: 0

Views: 38

Answers (2)

Felix K.
Felix K.

Reputation: 15663

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.

Upvotes: 1

Hilal Arsa
Hilal Arsa

Reputation: 171

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.

Upvotes: 1

Related Questions