redux-vsm
v1.1.9
Published
Visual State Management (Redux)
Downloads
2
Maintainers
Readme
redux-vsm
Основной идеей данной библиотеки является создание универсальных функций, которые можно применять по отношению к любому state приложения.
Пример экшена:
send('Обновление пользователей', cr,
`extend:users.engineers`, {
data: {
items: [{name: `Tom`, age: 25}],
count: 1
}
}
)
Настройка
import {initialize} from 'redux-vsm'
import {syncActions} from './actions/sync'
import {asyncActions} from './actions/async'
import {reducerFuncs} from './reducers/reducerFuncs'
initialize({
syncActions, // your sync actions
asyncActions, // your async actions
reducerFuncs, // universal reducer functions
store // your redux store
})
Откуда берутся syncActions и asyncActions мы рассмотрим ниже.
Начало работы с redux-vsm
Вернемся к функции send
send('Обновление пользователей', cr,
`extend:users.engineers`, {
data: {
items: [{name: `Tom`, age: 25}],
count: 1
}
}
)
send
использует функцию store.dispatch, которая есть в redux.
Отличие в том, что send
немного расширяемая.
Параметры:
type
- тип экшена, который вызываетсяcr
- контейнер, из которого вызывается данный action (для удобства разработки)extend:users.engineers
extend
- название функции, которая "расширяет" или обновляет объектusers
- название state в приложение над которым производится действиеengineers
- ветка, в которой производится действие
Так как функция extend
является универсальной - то можно её применить в любом state приложения:
send('Обновление счетчика', cr,
`extend:app.data`, {
data: {
count: 123
}
}
)
Функцию send
можно вызывать из контейнеров при небольших приложениях, но все же это плохая
практика. Для этого есть специальные функции: callSync
- для синхронных экшенов и callAsync
для
асинхронных экшенов.
В контейнере можно произвести вызов экшена 'Обновление счетчика':
callSync(`Обновление счетчика`, cr, {count: 123})
callSync
найдет данный type action-а и произведет выполнение нужного кода, который показан ниже.
Пример синхронных actions:
export const syncActions = {
'Обновление счетчика': (type, cr, params) => {
send('Обновление счетчика', cr,
`extend:app.data`, {
data: {
count: params.count
}
}
)
},
`etc...`
}
Пример асинхронных actions:
export const asyncActions = {
'Getting tickets': async (type, cr) => {
setFetching(`tickets.action`, true)
const json = await ajax.get(`/api/v1/tickets`)
send(type, cr,
`extend:tickets`, {
data: {
data: {
items: json,
count: json.length
},
action: {fetching: false}
}
}
)
},
'Getting users': async (type, cr) => {
setFetching(`users.action`, true)
const json = await ajax.get(`/api/v1/users`)
send(type, cr,
`extend:users`, {
data: {
data: {
users: json,
},
action: {fetching: false}
}
}
)
}
}
Пример универсальной функции extend:
export const reducerFuncs = {
extend: (state, action) => {
const {branch, branchData, params} = getParams(state, action)
state = branch ?
set(state, branch, deepExtend(branchData, params.data)) :
deepExtend(branchData, params.data)
return state
},
`etc...`
}