Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexseitsinger/redux-action-types
Helpers for redux
https://github.com/alexseitsinger/redux-action-types
action-type react react-redux redux
Last synced: about 1 month ago
JSON representation
Helpers for redux
- Host: GitHub
- URL: https://github.com/alexseitsinger/redux-action-types
- Owner: alexseitsinger
- License: bsd-2-clause
- Created: 2019-06-17T16:05:34.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T06:28:09.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T13:53:07.450Z (about 2 months ago)
- Topics: action-type, react, react-redux, redux
- Language: TypeScript
- Homepage:
- Size: 2.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Redux Action Types
Helpers for redux
## Installation
```bash
yarn add @alexseitsinger/redux-action-types
```
## Exports
#### createActionTypes
###### Usage
```typescript
import { createActionTypes } from "@alexseitsinger/redux-action-types"
export default createActionTypes({
prefix: "dates",
names: ["dates-for-week", ["dates-for-week", ["success", "failure"]],
})
// returns
{
"DATES_FOR_WEEK": "@@dates/DATES_FOR_WEEK",
"SUCCESS": "@@dates/DATES_FOR_WEEK_SUCCESS",
"FAILURE": "@@dates/DATES_FOR_WEEK_FAILURE",
}
```
#### createActionTypeSections
###### Usage
```typescript
// home/constants/sections/dates.ts
export default [
"dates-for-week",
["dates-for-week", [
"success",
"failure",
]],
]
// home/constants/index.ts
import { createActionTypeSections } from "@alexseitsinger/redux-action-types"
import datesConstants from "./sections/dates"
export default createActionTypeSections({
prefix: "home-page",
sections: {
dates: datesActionNames,
},
})
// returns...
{
home: {
dates: {
DATES_FOR_WEEK: "@@home-page/dates/DATES_FOR_WEEK",
DATES_FOR_WEEK_SUCCESS: "@@home-page/dates/dates-for-week/SUCCESS",
DATES_FOR_WEEK_FAILURE: "@@home-page/dates/dates-for-week/FAILURE",
},
},
}
```
#### createFlatReducer
###### Usage
```typescript
// home/reducer/index.ts
import { createFlatReducer } from "@alexseitsinger/redux-action-types"
import actionTypes from "../constants"
import defaultState from "./defaultState.json"
export default createFlatReducer({
defaultState,
actionTypes,
reducer: (action, state, setState) => {
switch (action.type) {
case actionTypes.ADD: {
return setSectionState({
items: [state.items, action.obj],
})
}
}
return state
}
})
```
#### createSectionReducer
###### Usage
```typescript
// home/reducer/sections/dates.ts
import { AnyAction } from "redux"
import { AnyActionType } from "src/types/actions"
import { PageReducerState, DatesSectionState } from "../../"
type ReducerReturnType = DatesSectionState | PageReducerState
export default (
action: AnyAction,
section: AnyActionType,
sectionState: DatesSectionState,
setSectionState: (o: Partial) => DatesSectionState,
parentState: PageReducerState,
setParentState: (o: Partial) => PageReducerState,
): ReducerReturnType => {
switch (action.type) {
case section.DATES_FOR_WEEK: {
return setSectionState({
datesForWeek: action.data,
})
}
}
}
// home/reducer/index.js
import { createSectionReducer } from "@alexseitsinger/redux-action-types"
import defaultState from "./defaultState.json"
import actionTypeSections from "./constants"
import datesReducer from "./sections/dates"
export default createSectionReducer({
defaultState,
sections: actionTypeSections,
reducers: {
dates: datesReducer,
},
})
```
#### createMapDispatch
###### Usage
```typescript
// home/actions/dates.ts
import actionTypeSections from "../../constants"
const section = actionTypeSections.dates
export const setDatesForWeek = (data: DatesForWeekData): DatesForWeekAction => ({
type: section.DATES_FOR_WEEK,
data,
})
const getDatesForWeekSuccess = (): DatesForWeekSuccessAction => ({
type: section.DATES_FOR_WEEK_SUCCESS,
})
const getDatesForWeekFailure = (): DatesForWeekFailureAction => ({
type: section.DATES_FOR_WEEK_FAILURE,
})
export const getDatesForWeek = (): ThunkAction => (dispatch: ThunkDispatch): void => {
// Make some asyncronous API call, then...
dispatch(getDatesForWeekSuccess())
dispatch(setDatesForWeek(data))
// Or...
dispatch(getDatesForWeekFailure())
}
// home/mapDispatchToProps.ts
import { createMapDispatch } from "@alexseitsinger/redux-action-types"
import * as datesActions from "./actions/dates"
export default createMapDispatch({
methods: {
home: {
dates: datesActions,
},
},
mapDispatch: (dispatch: Dispatch) => ({
goBack: (): void => {
dispatch(push("/"))
},
}),
})
// returns (in component props)...
{
methods: {
home: {
dates: {
getDatesForWeek, setDatesForWeek,
},
},
goBack,
},
}
```