Documenting the application state

[vraa]

I am working on a React / Redux web application. In the beginning of the project, I had a very good understanding of my application state. But, as the code base grows, I tend to put more and more attributes to the application state through reducers. The problem here is, if a new person joining my project, he may not have a clear knowledge about all the attributes that are already there in the state.

Right now, I am just using a commented out Object in a file called state.js to describe all the attributes in the state.

/*
    APP_STATE = {
        attribute1 : '',
        attribute2 : '',
        attribute3 : [],
        attribute4 : {
            key: ''
        },
    }
*/

The question is: Is there better way to document the structure of my application state so that it is easy to make sense? What approach do you guys use?

[JacobSoderblom]

Depending on your structure, I think wp-calypso does a great job on that. They have selectors, reducers, constants, actions and a README.md file that holds most of the documentation, all of them in same dir. Look below!

state
  product
    reducer.js
    selectors.js
    actions.js
    constants.js
    README.md

Check them out!

[vraa]

@JacobSoderblom that's interesting. May be a similar approach with reduced complexity and structure will work for small scale apps. Thanks.

[timdorr]

You can always use a Redux devtool, like either redux-devtools or redux-devtools-extension to browse the state tree. You can also just JSON.stringify the state at any point (I suggest putting the store on window to make it accessible through your console) to see what it looks like.