Write code that is easily tree shaken by Webpack (or any other bundler / minifier)
But Redux is a famous open source project so everyone knows that after dispatching an action. The reducer will lie somewhere in the reducers folder. So I should just grep for the type in the reducers folder. And people have made sure that the type is kinda unique with all caps standard.
dispatch({type: ’ADD_TODO_TO_LIST’,payload: {list: 2,todoText: ‘Buy Dog Food’}})
But in your codebase if a particular action has been deleted will its reducer also get removed in tree shaking? Is this statically analyzable? How can we make this better? (If your unused reducer gets removed in tree shaking, please mention in the comments, I think I may be ignorant on this, I am pretty sure that this problem must have been solved)
Redux Solution
// todoAction.jsimport {ADD_TODO_TO_LIST} from ‘./todoReducer’
export function addTodoAction (dispatch, list, todoText) {dispatch({reducer: ADD_TODO_TO_LIST,payload: {list: 2,todoText: ‘Buy Dog Food’}})}
// todoReducer.jsexport function ADD_TODO_TO_LIST(state, action) {...}
So now any new member in your team can easily find out what function gets called. I’ve seen code bases where people have created enums for action types and then imported them in the actions file. This is similar.
How to use this?
import {createStore, compose, applyMiddleware} from ‘redux’
export const store = createStore(reducer,defaultState,compose(applyMiddleware(modifyAction),window.__REDUX_DEVTOOLS_EXTENSION__()))
const modifyAction = () => (next) => (action) => {return next({...action,type: action.type.name,reducer: action.type})}
function reducer (state, action) {return action.reducer(state, action)}
It even works with Redux Devtools. Its pretty amazing that Redux already has the ability or gives us the flexibility to help us solve this. And now every time a Action/Reducer gets obsolete, its gets removed in tree shaking process (if your bundler does that)
I’ve completely changed Redux haven’t I for an imaginary problem that I alone face? 😂
How to use with combineReducers?
Dispatch events with the reducer key being an object with reducer functions on its keys. In your reducer function check if the reducer key is a function or an object. If its an object, take the functions over the keys and call them with the respective keys of the state and then extend the remaining state. If function call with entire state.
What next?
Make the reducer more statically analyzable. By this I mean your IDE should be able to check your action payload and your reducer and test if everything is in order, if you payload structure follows the requirement of the reducer. There should be a way of doing this with Typescript or Flow. If you know about this, do let me know.
In Summary
Next time in an interview when someone asks you how do you write manageable Javascript code, make sure you mention code that is statically analyzable, code which can be tree shaken, code which can warn you if you are not writing it correctly.
If you have a better title for this story which conveys what I want to say let me know.