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 pro

Answer 1

I'm not sure this is exactly relevant (the context is using Redux with React), but I found this page while searching for something similar, so I'm writing this in case it is of interest.

My motivation is, I have have state objects where I would like to expose a representation of that state rather than the state itself. So for example (using Immutable.js), I have a state (a schema) that comprises one or more fields, each identified by a unique identifier and stored in a Map, plus a List of identifiers that gives the field ordering.

I really don't want to writing stuff like

state.get('field').get(state.get('order').get(nth))

to get the nth field anywhere other than close to the reducer, so that the internal representation is hidden and can be changed easily.

What I'm currently doing (and this is a bit of an experiment), is to add a function in the same file as the reducer:

schema.mapVisibleState = function (state) {
    return {
        getOrderedFields: () => state.get('order').map((fid) => state.get('fields').get(fid)
    }
}

This is used in the corresponding React components (along with a similarly motivated schema.bindActionCreators function):

export const Schema = connect(
    (state) => schema.mapVisibleState (state),
    (dispatch) => schema.bindActionCreators (dispatch)
)(_Schema) ;

Now I can access the fields, in the correct order, inside the component simply as this.props.getOrderedFields() and not worry about the underlying representation. It also has the additional nice property that it is easy to do dependency injection of the getOrderedFields() function.

Also, since I have a similar structure for the field state, I can extend this:

schema.mapVisibleState = function (state) {
    return {
        getOrderedFields: () => state.get('order').map((fid) => field.mapVisibleState(state.get('fields').get(fid)),
        getNthField (nth) => field.mapVisibleState(state.get('fields').get(state.get('order').get(nth)))
    }
}