Redux Action Creators. Без констант и головной боли26.09.2016 16:33

Всем привет! Эта статья будет полезна тем, кто устал использовать constants в Redux (частично показано на превью выше). Под катом я покажу очередной возможный велосипед и как на нем кататься.

Модуль + документация (https://github.com/pavelivanov/redbox)

Использование Redux предполагает наличие экшнов (actions) и редьюсеров (reducers), а также констант (constants), которые используются для связи экшнов с редьюсерами посредством передачи type (типа экшна).

Пример использования:

const ADD_TODO = 'ADD_TODO'

export {
  ADD_TODO
}

import { ADD_TODO } from 'constants'

export const addTODO = () => {
  return (dispatch) => {
    dispatch({
      type: ADD_TODO,
      item
    })
  }
}

const ADD_TODO = 'ADD_TODO'

const initialState = {
  TODO: []
}

export default (state = initialState, action) => {
  switch (action.type) {

    case 'ADD_TODO':
      return {
        ...state,
        TODO: [
          ...state.TODO,
          action.TODO
        ]
      }

    default:
      return state
  }
}

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

В Redbox я избавился от этих проблем. Все что вам нужно — это создать экшн и использовать его. Все.

Пример того же кода (выше) с использованием Redbox:

import { createAction } from 'redbox'

export const initialState = {
 TODO: []
}

export const addTODO = createAction((state, payload) => {
  return { 
    ...state, 
    TODO: [ 
      ...state.TODO, 
      payload 
    ] 
  }
})

Принципиальное отличие: для передачи начального state делается экспорт из файла.

Что касается request экшнов, Redbox предлагает большое кол-во сахара. Пример использования:

Создаем экшн:

// actions/users.js

import { createAction } from 'redbox'

export const getFeed = createAction({
  endpoint: '/api/users/me/posts',
  method: 'GET'
})

Вызываем созданный экшн:

// containers/Users/Feed.js

import actions from 'core/actions'

actions.users.getFeed({
  subset: 'posts'
})

В результате вызова getFeed в state будет:

{
  users: {
    posts: {
      pending: false,
      data: RESPONSE_BODY,
      error: null
    }
  }
}

Стоит заметить что createAction и метод, который он возвращает в результате выполнения принимают одинаковые параметры, т.е. subset можно было бы указать и в createAction, а потом еще его и переопределить при вызове в разных местах.

У каждого subset есть 3 состояния:

1) начало запроса { pending: true, data: null, error: null }
2) запрос выполнен { pending: false, data: RESPONSE_BODY, error: null }
3) запрос выполнен с ошибками { pending: false, data: null, error: RESPONSE_ERROR }

Больше не нужно мучаться с созданием трех экшенов с тремя разными типами для обработки нужного кейса из редьюсера.

Для отправки запросов внутри используется superagent. createAction в опциях принимает почти все параметры, которые используются в superagent.

Основные опции:

params