与Redux互动，如何设计状态

Question

My website has 3 pages, eg www.example.com.au/invoices , www.example.com.au/customers and www.example.com.au/suppliers .

In this case, how to organize the global Redux state, I mean the structure. should it look like below?

state = {
    invoices: {
        //invoices related data
    },
    customers: {
        //customers related data
    },
    suppliers: {
        //suppliers related data
    }
}

Answer 1

That looks a good start. I find it's a good idea to try and keep the state as normalized as possible - try thinking about it as a relational database.

This is a great article: https://medium.com/javascript-scene/10-tips-for-better-redux-architecture-69250425af44#.9c678jwib

as is http://redux.js.org/docs/recipes/reducers/NormalizingStateShape.html

Answer 2

It is up to you on how to store. But a more convenient way to do is, having separate file for each of them and combine them as a single store.

ie, your folder structure looks some what like this,

reducers/
    |---- index.js
    |---- customers.js
    |---- invoices.js
    |---- suppliers.js

---

Inside each of customers.js , invoices.js and suppliers.js , write their own reducers in each of them and combine them to a single large store in the index.js file using combineReducers() method from redux

---

Basically the flow is,

• Write separate small-small reducers.
• Import all the reducers in a single file( index.js ).
• Using combineReducers() combine them into a single large reducer and export it to store.

---

Hope it helps! :)

Answer 3

state = {
    invoices: {
        //invoices related data
    },
    customers: {
        //customers related data
    },
    suppliers: {
        //suppliers related data
    }
}

this looks good.

If you're on invoices page and if you won't be accessing state.suppliers or state.customers , then you don't need to combineReducers all of them together.

You can lazy load reducers (dynamically and use store.replaceReducer to inject them into store). This saves you some bytes ;)

Some tips:

• Separate business logic from views (components) and reducers.
• Identify core reducers (those which are needed throughout the app) and others. Only create initial store with core reducers.
• Split reducers and action creators into different files and lazy load reducers as required.