So far, we have gone through a lot. We have covered principles, core concepts, and even got to build our own Redux implementation. We should be mighty proud of ourselves at this point. There is something we have yet to cover, though, and that is how we use Redux in an optimal way. There are some key rules we can follow.

Organize your file system optimally. You should not have a few files when building an app but rather many, and usually organized by feature. This leads to the following file setup for a feature:

• Reducer: We should have one file, per reducer, for this
• Actions: We should have a file describing all the actions we could possibly dispatch
• View/component file: This has nothing to do with Redux but, regardless of the framework we go with, we usually have a file describing the component we are trying to build

There is another aspect that is worth doing as well, and that is optimizing the setup process of our store. The store normally needs to be initialized with a number of reducers. We could write some code that looks like this:

const booksReducer = require("./books/reducer");
const personReducer = require("./reducer");

function combineReducers(config) {
  const states = Object.keys(config);
  let stateObject = {};

  states.forEach(state => {
    stateObject[state] = config[state];
  });

  return stateObject;
}

const rootReducer = combineReducers({
  books: booksReducer,
  person: personReducer
});

const store = createStore(rootReducer);

store.reduce({ type: "SOME_ACTION", payload: "some data" });

There is nothing wrong with the setup here, but it you have many features, and a reducer in each, you will end up with a lot of imports, and your call to combineReducers() will be longer and longer. An approach that will solve that is having each reducer register itself with the rootReducer. This way, we can switch the following call:

const rootReducer = combineReducers({
  books: booksReducer,
  person: personReducer
});

const store = createStore(rootReducer);

It will be switched with this:

const store = createStore(getRootReducer());

This forces us to create a new root-reducer.js file, which will look like the following:

// best-practices/root-reducer.js

function combineReducers(config) {
  const states = Object.keys(config);
  let stateObject = {};
  
  states.forEach(state => {
    stateObject[state] = config[state];
  });

  return stateObject;
}

let rootReducer = {};

function registerReducer(reducer) {
  const entry = combineReducers(reducer);
  rootReducer = { ...rootReducer, ...entry };
}

function getRootReducer() {
  return rootReducer;
}

module.exports = {
  registerReducer,
  getRootReducer
};

We have highlighted the important part here, the registerReducer() method, which a reducer can now use to register itself with the rootReducer. At this point, it's worth going back to our reducer and updating it to use the registerReducer() method:

// best-practies/books/reducer.js

const { registerReducer } = require('../root-reducer');

let initialState = [];

function bookReducer(state = initialState, action) {
  switch(action.type) {
    case 'LIST_BOOKS':
      return state;
    case 'ADD_BOOK':
      return [...state, {...action.payload}];
  }
}

registerReducer({ books: bookReducer });