Typex-Reducers is available on npm:
$ npm install typex-reducers
As I'm scratching the surface of Redux.. Going through that switch cases in your reducers.. Sigh. I told myself, we can get better from this right? Also, I love creating decorators (it may sound biased) 🤣
Non Typex-Reducers way:
https://redux.js.org/basics/exampletodolist
// ...
const todos = (state = RootState.TodoState = initialState, action: any) => {
switch (action.type) {
case TodoActions.Type.ADD_TODO:
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
case TodoActions.Type.TOGGLE_TODO:
return state.map((todo: any) =>
(todo.id === action.id)
? {...todo, completed: !todo.completed}
: todo
)
default:
return state
}
}
export default todos
// ...
Just imagine maintaining a lot of those switch cases... Painful 😭
Typex-Reducers way:
reducer/todo.reducer.ts
export class Todos {
@ActionReducer(TodoActions.Type.ADD_TODO)
public addTodo (state: RootState.TodoState = initialState, action: any) {
return [
...state,
{
id: action.id,
text: action.text,
completed: false
}
]
}
@ActionReducer(TodoActions.Type.TOGGLE_TODO)
public deleteTodo (state: RootState.TodoState = initialState, action: any) {
return state.map((todo: any) =>
(todo.id === action.id)
? {...todo, completed: !todo.completed}
: todo
)
}
}
reducer/index.ts
import { TypexReducers } from 'typex-reducers';
import './todo-reducer.ts'; - Note: It is important to load your reducers so Typex will know where your reducers are.
export const initialState: RootState.TodoState = [
{
id: 1,
text: 'Use Redux',
completed: false
}
];
export const rootReducer = combineReducers<RootState>({
todos: TypexReducers(initialState) as any,
router: routerReducer as any
});
And that's it! A much more maintainable and cleaner ✨✨✨
Any suggestions on how to improve this is VERY OPEN. Open up a issue. This is just another way of doing something. If you liked it, let's collaborate and make the world a better place 😍
MIT