If you landed in this section, you might be wondering at this point, "what should I do now?". Here is where we provide some essential tips/suggestions on how to diverge from creating trivial TodoMVC apps to a real world application.
Whenever we decide to create a new project, we tend to bypass several aspects that in the future may slow us down. In a real world project we have to consider several things before we start coding, such as: how to configure a
store size, data structure, state model, middlewares, environment, async transactions, immutability, etc..
The above are some of the main considerations we have to think about beforehand. It's not an easy task, but there are some strategies for making it go smoothly.
One of the biggest challenges developers face when using Redux is to describe UI state with data. The majority of software programs out there are just data transformation, and having the clear understanding that UIs are simply data beautifully presented facilitates the process of building them.
To configure a
store we have to make major considerations on which middleware to use. There are several libraries out there, but the most popular ones are:
Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. It incorporates the methods
getState as parameters.
redux-saga is a library that aims to make the execution of application side effects (e.g., asynchronous tasks like data fetching and impure procedures such as accessing the browser cache) manageable and efficient. It's simple to test, as it uses the ES6 feature called
generators, making the flow as easy to read as synchronous code.
redux-observable is a middleware for redux that is inspired by redux-thunk. It allows developers to dispatch a function that returns an
iterable of action(s). When the observable emits an action, or the promise resolves an action, or the iterable gives an action out, that action is then dispatched as usual.
Redux DevTools is a set of tools for your Redux development workflow.
redux-logger logs all actions that are being dispatched to the store.
Tip: Think of middlewares as skills you give to your
store. i.e: By attributing the
redux-thunk to your store, you're giving the
store the ability to dispatch async actions.
A big source of confusion when it comes to a large project is what to name things. This is often just as important as the code itself. Defining a naming convention for your actions at the very beginning of a project and sticking to that convention helps you to scale up as the scope of the project grows.
Tip: Set up an opinionated code formatter, such as Prettier.
There is no magic to analyze and predict how much your application is going to grow. But it's okay! Redux's simplistic foundation means it will adapt to many kinds of applications as they grow. Here are some resources on how to build up your application in a sensible manner:
Tip: A repository with an extensive amount of content about best practices and Redux architecture is shared by @markerikson at react-redux-links.