Есть ли способ повторно использовать логику редуктора в Redux? - PullRequest
Новая
       31

Есть ли способ повторно использовать логику редуктора в Redux?

0 голосов
/ 04 мая 2018

Я использую React / Redux для создания своего приложения. Есть несколько кнопок, и приложение должно отслеживать состояние нажатия этих кнопок. Все эти кнопки используют одну и ту же логику редуктора, которая заключается в переключении состояния с true на false при каждом нажатии кнопки. Единственным отличием является название государства. Есть ли способ уменьшить мой код, определив «глобальный» редуктор, который можно применять к нескольким состояниям? Пожалуйста, обратитесь к этому изображению для пример

Спасибо!

1 Ответ

0 голосов
/ 04 мая 2018

Вот как бы я это сделал. Вместо того, чтобы отправлять уникальное действие для каждого типа кнопки, например MENU_BTN, SEARCH_BTN и т. Д., Я бы отправил { type: 'TOGGLE_BUTTON', payload: 'menu' } и в редукторе 

case TOGGLE_BUTTON:
  return {
    [payload]: !state[payload]
    ...state
  }

Затем вы можете переключать кнопки, как это 

const toggleButton = key => ({
  type: 'TOGGLE_BUTTON',
  payload: key
})
dispatch(toggleButton('menu'))
dispatch(toggleButton('search'))

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

...
buttons: {
  menu: true,
  search: false
}
...

и вы можете легко написать селектор для каждой кнопки 

// Component displaying state of menu button //
let MyComponent = ({ menuButtonState }) => (
  <div>
  Menu button is {menuButtonState ? 'on' : 'off'}
  </div>
)
// Helper function for creating selectors //
const createGetIsButtonToggledSelector = key => state => !!state.buttons[key]
// Selector getting state of a menu button from store //
const getIsMenuButtonToggled = createGetIsButtonToggledSelector('menu')
// Connecting MyComponent to menu button state //
MyComponent = connect(state => ({
  menuButtonState: getIsMenuButtonToggled(state)
})(MyComponent)
...