redux-packaged

Problems about management redux module

If you familar with 'CBA'(Component Base Architecture), you will need your module standalone.

For example:

First your state look like this:

{
	foo: todoState
}

And what happen if you update your state like this:

{
	foo: {
		bar: {
			baz: todoState
		}
	}
}

You have to change a lot from selector and make you feel tired.

So what about you wrap your redux's module.

Description

Redux-packaged collect some util to packaged your redux module.

Example

See at test/basic-sample

import action from './action'
import actionType from './actionType'
import reducer from './reducer'
import reduxUtil from '../../src'
import { combineReducers } from 'redux'

// Now be wrapped
const makeTodoRedux = reduxUtil.make({
	makeActionType: actionType.make,
	makeAction: action.make,
	makeReducer: reducer.make,
	makeSeletor: reducer
})


// Let's use
const todoRedux = makeTodoRedux({
	// local is depend on your rootReducer setup in this case is ['foo', 'bar']
	'local': ['foo', 'bar'],
})

// Setup
const rootReducer = combineReducers({
	'foo': combineReducers({
		'bar': todoRedux.reducer
	})
})

type RootState = ReturnType<typeof rootReducer>
let state: RootState
// state.foo.bar.list.all // It's work


// Call Action
todoRedux.actionCollection.add('Let us review your code')
todoRedux.actionCollection.remove('1')

// How about get data
todoRedux.selector

Full example

action.ts

import { action, ActionType } from 'typesafe-actions'
import { ActionTypeTodo } from './actionType'
import { IReduxModule } from '../../src'


export type ActionCollectionTodo = ReturnType<typeof make>
export type ActionTodo = ActionType<ActionCollectionTodo>

const make = (reduxModule: IReduxModule<ActionTypeTodo, {}>) => {
	const { actionType } = reduxModule
	const add = (title: string, status = 'idle') => action(actionType.ADD, { title, status, date: new Date(), id: Number(new Date()).toString()})
	const remove = (id: string) => action(actionType.REMOVE, { id })
	return {
		add,
		remove,
	}
}

export default {
	make
}

actionType.ts

import reduxUtil, { ReturnActionType } from '../../src'

const make = reduxUtil.actionType.make([
	'ADD',
	'REMOVE'
])

export type ActionTypeTodo = ReturnActionType<typeof make>

export default {
	make
}

reducer.ts

import { ActionTodo } from './action'
import { ActionTypeTodo } from './actionType'
import { IReduxModuleAction } from '../../src'
import { merge, omit } from 'ramda'


export type Status = 'inProcessing' | 'done' | 'idle'
export interface Todo {
	id: string,
	date: string,
	title: string,
	status: Status
}
export interface TodoState {
	resource: {
		[id: string]: Todo
	},
	list: {
		all: string[]
	},
}

const make = (reduxModule: IReduxModuleAction<ActionTypeTodo, {}, ActionTodo>) =>
	(state: TodoState, action: ActionTodo) => {
		const { actionType } = reduxModule
		switch (action.type) {
			case actionType.ADD: {
				const resourceUpdate = merge({[action.payload.id]: action.payload})(state.resource)
				return {
					...state,
					resource: resourceUpdate
				}
			}
			case actionType.REMOVE: {
				const resourceUpdate = omit(action.payload.id)(state.resource)
				return {
					...state,
					resource: resourceUpdate
				}
			}
			default: {
				return state
			}
		}
	}

export default {
	make
}

Contributes

Help me to build this awesome package