Как определить, куда кусок кода должен идти в ReduxJS?

Question

Я следую учебному пособию по адресу https://redux.js.org/basics/usagewithreact

Однако я застрял со следующим, поскольку автор не скажет вам, куда поместить следующий код.

IЯ до "Реализации компонентов контейнера":

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

Это код, который необходимо добавить в один из созданных файлов или, возможно, новый файл.Однако в статье не указано, где и как это сделать.Я новичок в работе с nodejs, Reactionjs & reduxjs.

Answer 1

Этот код определенно входит в ваш компонент.Точнее, если вы разделяете ваши компоненты на презентационные компоненты и контейнеры , это должно войти в ваш контейнер.

Чтобы использовать connect (), вам нужно определить специальную функцию mapStateToPropsкоторый описывает, как преобразовать текущее состояние хранилища Redux в реквизит , который вы хотите передать в презентационный компонент, который вы упаковываете.

Как вы можете видеть в примере, фрагментимеет функцию mapStateToProps.

getVisibleTodos является просто «селектором» для передачи состояния во что-то, что ваш компонент может использовать.Взгляните на библиотеку reselect , чтобы узнать о более сложных средствах выбора / кэширования / сборки значений в редукте.

Здесь вы найдете несколько проектов github, соответствующих примерам, описанным на redux.js.org.Например, todos пример репо.Посмотрите, как проект структурирован и , где код идет точно .

Answer 2

Он должен быть в файле редуктора.

Возможно, вы захотите проверить полную документацию здесь об использовании редуктора.

Он содержит разныеучебники, но они могут помочь вам решить проблему на странице документации.