Pull to refresh
14
0
Паша @Grammka

Front-end developer

Send message
вы не думали мокать запросы?
Гляньте плз на такое решение (обертку над R/R) Redaction
Могли бы сделать ссылку на гитхаб в статье. А на гитхабе уже сделать список классов… со стилями и тд
Бывает очень весело =)

{}[0] == 0 && 0 != {}[0] // true

Пример добавил: https://pavelivanov.github.io/redaction/
Исходники тут: https://github.com/pavelivanov/redaction/tree/master/example
Позже добавлю тесты
Все, я вас, кажется, понял… вы хотите один и тотже ЭКШНТИП назначать в switch case разных редьюсеров?
При использовании Redux вы создаете отдельно экшны и отдельно редьюсеры, они между собой никак не связаны, в экшнах вы вызываете диспатч и передаете тип вызываемого редьюсера. Чтобы вызвать 3 редьюсера придется сделать 3 диспатча.

Что мешает тогда сделать так:

// actions/index.js
import actions from './redbox-actions'


export const someAction = () => {
  actions.user.authStart()
  
  request()
    .then((result) => {
      actions.user.authSuccess(result)
      actions.user.authComplete()
    })
    .catch((err) => {
      actions.user.authError(err)
      actions.user.authComplete()
    })
  
  //...
}

export default actions

Код ведь чище и его меньше, читать удобнее и поддерживать. Все понятно, откуда что берется.
Я к тому что суть не меняется… это все теже редьюсеры… Просто теперь не нужны типы и диспатч метод. Внутри redbox, если вы посмотрите, создаются все теже комбинированные редьюсеры, просто типы для них создаются уникальные от имени файла, в котором были созданы и имени метода, которым вы его обозвали. А диспатч передается один раз в процессе инициализации и делается замыкание
Т.е. вы внутри одного файла экшнов хотите вызывать редьюсеры из разных файлов?

п.с.
К минусам необоснованным на хабре я привык… пофигу)
Забыл описание добавить к коду: (возможно не оч корректный пример был) т.к. внутри есть 3 состояния, то и через коннект в компонент попадают эти состояния, которые можно использовать pending — рисуем лоадер, error — рисуем ошибку, data есть — рисуем ее. И не нужно городить однотипную логику каждый раз… ну или изобретать все-таки свой велосипед прийдется чтобы не плодить код внутри файлов =/
Пример ваш понял, вот набросал:

// actions/user.js

export const login = createAction({
  endpoint: '/login',
  method: 'POST'
})


// containers/Login/index.js

@connect((state) => ({
  authentication: state.user.authentication
}))
export default class Login extends React.Component {
  auth = () => {
    actions.auth.login({
      subset: 'authentication',
      body: {
        username,
        password
      },
      onResponse: ({ body }) => {
        // запускаем любой другой асинхронный вызов, если нужно
      }
    })
  }

  render() {
    const { authentication } = this.props

    if (authentication.pending) {
      return (
        <Loader />
      )
    }

    if (authentication.error) {
      return (
        <div>Authentication ERROR</div>
      )
    }

    return (
      <div>
        <AuthForm onSubmit={this.auth} />
      </div>
    )
  }
}

Если вы имеете ввиду что в моем случае нельзя при создании экшна построить сразу цепочку вызовов, то это относится к архитектуре и, имхо, я буду больше рад такому варианту с цепочкой асинхронных запросов нежели буду довольствоваться лапше из кода =/ К сожалению, практика показала что такой вариант в разы лучше. Есть огромный проект, в котором используется чистый Redux (примерно 400 апи запросов) и есть еще больше проект где используется подход Redbox и кода в разы меньше / чище и поддерживать в разы легче.
А вы можете привести пример кода, пожалуйста. Минимальный чтобы понять как вы хотите построить структуру и я докажу (почти уверен) что в структуре на redbox будет меньше кода, и лишнего не будет и вызываться будут те же диспатчи (за исключением состояний запроса)
Спешл фо ю переделал…
Напишите, пожалуйста, пример что вы хотите реализовать посредством просто Redux, т.к. я не совсем понял что вы хотите написав «без изменения непосредственно addTodo».

Если же я правильно понял и вы хотите просто изменить основное дерево state в нескольких местах при вызове одного экшна что мешает вам вызвать несколько экшн-редьюсеров? Пример в этом комментарии
А что неявного в моем подходе? Я не претендую на звание создателя чего-то нереального. Я делал либу в первую очередь для себя и для использования в реальном проекте и это помогло сократить код в разы. И все работает и команде удобно использовать такой подход. Redbox это не замена Redux это скорее сахар.
Если бы вы зашли на гитхаб, то заметили бы откуда взялось название. Я пользовался либой React Toolbox. Она дает набор комонентов для реакта. Я искал название созвучное с Redux. Есть множество вариаций с начальными буквами «Red». Исходя из этого я решил что Redux Tool Box будет нормально. Потому что модуль дает набор функционала для удобной работы с Redux. Таким образом получилось название REDuxtoolBOX. А что касается красного квадратика… квадратик это Square на английском, если уж на то пошло… А Box — коробка.
К сожалению исправить уже не могу… написал чушь… что мешает сделать doMultipleActions обычным методом через экспорт и вызывать несколько экшнов / редьюсеров сразу? Тоже самое и с асинхроннщиной…
потому что он вызывается под капотом?
import actions from 'core/actions'

export const doMultipleActions = createAction((state, { foo, bar }) => {
  actions.reducersFolderName.setFoo(foo)
  actions.reducersFolderName.setBar(bar)
})

export const initialState = {
  foo: null,
  bar: null
}

export const setFoo = createAction((state, payload) => ({ ...state, foo: payload }))
export const setBar = createAction((state, payload) => ({ ...state, bar: payload }))

doMultipleActions({
  foo: 1,
  bar: 2
})

Это, конечно, выглядит не совсем корректно с точки зрения использования редьюсера, но работать будет как часы.

Information

Rating
Does not participate
Location
Москва, Москва и Московская обл., Россия
Works in
Registered
Activity