项目作者: codemillers

项目描述 :
Describe easily your redux reducer, working in couple with type-to-reducer (https://github.com/tomatau/type-to-reducer).
高级语言: JavaScript
项目地址: git://github.com/codemillers/type-to-reducer-addons.git
创建时间: 2018-10-02T08:47:53Z
项目社区:https://github.com/codemillers/type-to-reducer-addons

开源协议:

下载


type-to-reducer-addons

Describe easily your redux reducer, working in couple with type-to-reducer.
type-to-reducer-addons, like type-to-reducer, works well following API suggested by redux-promise-middleware.

Usage

npm install type-to-reducer type-to-reducer-addons --save

A usage of type-to-reducer like that:

  1. import typeToReducer from 'type-to-reducer'
  2. const initialState = {
  3. user: {
  4. data: null,
  5. fetching: false,
  6. fetched: false,
  7. error: false
  8. }
  9. }
  10. export const reducer = typeToReducer({
  11. [ USER_FETCH ]: {
  12. PENDING: () => ({
  13. ...initialState,
  14. fetching: true
  15. }),
  16. REJECTED: (state, action) => ({
  17. ...initialState,
  18. fetching: false,
  19. error: action.payload
  20. }),
  21. FULFILLED: (state, action) => ({
  22. ...initialState,
  23. fetching: false,
  24. fetched: true,
  25. data: action.payload
  26. })
  27. }
  28. }, initialState)

can be easily compacted writing something like that:

  1. import typeToReducer from 'type-to-reducer'
  2. import typedReducer from 'type-to-reducer-addons'
  3. const initialState = {
  4. user: {
  5. data: null,
  6. fetching: false,
  7. fetched: false,
  8. error: false
  9. }
  10. }
  11. const reducer = typeToReducer({
  12. [ USER_FETCH ]: typedReducer('user')
  13. }, initialState)

So you have only to specify the name of the property target of the function (in this case user).

Splitting

When you have to customize one of pending, rejected or fulfilled function, you can split typedReducer:

  1. import typeToReducer from 'type-to-reducer'
  2. import { pendingAction, rejectedAction, fulfilledAction } from 'type-to-reducer-addons'
  3. const initialState = {
  4. user: {
  5. data: null,
  6. fetching: false,
  7. fetched: false,
  8. error: false
  9. }
  10. }
  11. const reducer = typeToReducer({
  12. [ USER_FETCH ]: {
  13. PENDING: (state, action) => pendingAction(state, action, 'user'),
  14. REJECTED: (state, action) => rejectedAction(state, action, 'user'),
  15. FULFILLED: (state, action) => {
  16. const { age, name, surname } = action.payload
  17. return {
  18. ...initialState,
  19. fetching: false,
  20. fetched: true,
  21. data: {
  22. name,
  23. surname,
  24. age
  25. }
  26. }
  27. }
  28. }
  29. }, initialState)

Custom shape

If your initial state object shape is different than the raccomanded by redux-promise-middleware, we exposed a function to call to customize your object shape.

  1. import typeToReducer from 'type-to-reducer'
  2. import typedReducer, { setCustomShape } from 'type-to-reducer-addons'
  3. const initialeState = {
  4. user: {
  5. payload: null,
  6. isFetching: false,
  7. isFetched: false,
  8. errors: null,
  9. },
  10. };
  11. const customShape = {
  12. data: "payload",
  13. fetching: "isFetching",
  14. fetched: "isFetched",
  15. error: "errors",
  16. };
  17. setCustomShape(customShape);
  18. const reducer = typeToReducer({
  19. [ USER_FETCH ]: typedReducer('user')
  20. }, initialState)