The goal of this article is to explore how to use Redux to deal with a complex store model using the fresh fruit example.

Example: Buy fresh fruit

In the previous article, Redux Primer – Basic Usage, Adama used Redux to start a fruit store.

Who knows fruit shop business is getting better and better, so university began to expand business, not only sell fruit, but also sell fresh, so there is a fruit department and fresh department.

So He thought about the behavior of customers who buy fresh food in the future:

// Buy fresh - eggs
function buyEgg(num) {
  return {
    type: 'BUY_EGG'.payload: {
      count: num
    }
  }
}
Copy the code

After divided into different departments, different businesses have different ways of accounting, score book, to add a fresh accounting book:

const freshState = {
  egg: 0
};
Copy the code

The original fruit ledger will also be renamed:

- const state = {
+ const fruitsState = {
    apple: 0
  };
Copy the code

Then add cashiers in the fresh department to manage the freshState account:

// Grocery cashier
function freshReducer(state = freshState, action) {
  if (action.type === 'BUY_EGG') {
    return Object.assign({}, state, {
      egg: state.egg + action.payload.count
    });
  }
  return state;
}
Copy the code

Then the cashier of the original fruit Department manages the fruitsState, which needs to be modified:

// Fruit cashier- function reducer(state, action) {
+ function fruitReducer(state = fruitState, action) {
   if (action.type === 'BUY_APPLE') {
     return Object.assign({}, state, {
       apple: state.apple + action.payload.count
     });
   }
   return state;
 }
Copy the code

But He didn’t want to look at the division books, he just wanted to look at the general ledger. It just so happens that Redux offers combineReducers, which brings together the books managed by individual cashiers:

- const { createStore } = require('redux');
+ const { createStore, combineReducers } = require('redux');/ / total books+ const state = {
+ fruits: fruitsReducer,
+ fresh: freshReducer
+};// The chief cashier+ const reducer = combineReducers(state);// Create a new fruit store- const store = createStore(reducer, state);
+ const store = createStore(reducer);
Copy the code

The fruit store was open for business, and the salespeople were back to handling customers’ shopping needs:

store.dispatch(buyApple(3)); // {"fruit":{"apple":3},"fresh":{"egg":0}}
store.dispatch(buyEgg(1)); // {"fruit":{"apple":3},"fresh":{"egg":1}}
store.dispatch(buyApple(4)); // {"fruit":{"apple":7},"fresh":{"egg":1}}
store.dispatch(buyEgg(8)); // {"fruit":{"apple":7},"fresh":{"egg":9}}
// ...
Copy the code

After the upgrade, the fruit shop is running smoothly again

Explanation:

combineReducers

As business scenarios become more complex, state structures become more complex and large. If only a reducer is used to calculate state changes, it will be particularly troublesome. At this time, we can separate out the independent data in the state, separately calculate it with a reducer, and then merge it into the state through the combineReducers method.

CombineReducers receive an object, which is the final state

const reducer = combineReducers({
  fruits: fruitsReducer,
  fresh: freshReducer
});
Copy the code

The illustration

Redux start — Reduce reducer and run node./demo2/index.js directly from the console

Introduction to Redux — Basic Usage

Redux: How to handle Async Actions