Redux: Documenting the application state

Created on 11 Jan 2017 · 3Comments · Source: reduxjs/redux

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?

Source

vraa

👍6

Most helpful comment

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!

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

Check them out!

JacobSoderblom on 17 Jan 2017

👍3

All 3 comments

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

Check them out!

JacobSoderblom on 17 Jan 2017

👍3

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

vraa on 17 Jan 2017

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.