javascript - How to put methods onto the objects in Redux state?

Question

According to docs state of react app has to be something serializable. What about classes then?

Let's say I have a ToDo app. Each of Todo items has properties like name, date etc. so far so good. Now I want to have methods on objects which are non serializable. I.e. Todo.rename() which would rename todo and do a lot of other stuff.

As far as I understand I can have function declared somewhere and do rename(Todo) or perhaps pass that function via props this.props.rename(Todo) to the component.

I have 2 problems with declaring .rename() somewhere: 1) Where? In reducer? It would be hard to find all would be instance methods somewhere in the reducers around the app. 2) Passing this function around. Really? should I manually pass it from all the higher level components via And each time I have more methods add a ton of boilerplate to just pass it down? Or always do and hope that I only ever have one rename method for one type of object. Not Todo.rename() Task.rename() and Event.rename()

That seems silly to me. Object should know what can be done to it and in which way. Is not it?

What I'm missing here?

Answer 1

In Redux, you don't really have custom models. Your state should be plain objects (or Immutable records). They are not expected to have any custom methods.

Instead of putting methods onto the models (e.g. TodoItem.rename) you are expected to write reducers that handle actions. That's the whole point of Redux.

// Manages single todo item
function todoItem(state, action) {
  switch (action.type) {
    case 'ADD':
      return { name: action.name, complete: false };

    case 'RENAME':
      return { ...state, name: action.name };

    case 'TOGGLE_COMPLETE':
      return { ...state, complete: !state.complete };

    default:
      return state;
  }
}

// Manages a list of todo items
function todoItems(state = [], action) {
  switch (action.type) {
    case 'ADD':
      return [...state, todoItem(undefined, action)];

    case 'REMOVE':
      return [
        ...state.slice(0, action.index),
        ...state.slice(action.index + 1)
      ];

    case 'RENAME':
    case 'TOGGLE_COMPLETE':
      return [
        ...state.slice(0, action.index),
        todoItem(state[action.index], action),
        ...state.slice(action.index + 1)
      ];
  }
}

If this still doesn't make sense please read through the Redux basics tutorial because you seem to have a wrong idea about how Redux applications are structured.