Example 1: Basic Module Creation

The CREATE framework is a powerful tool for developers to build scalable and maintainable applications. It emphasizes modular design, reusability, and clear separation of concerns. In this article, we explore practical examples of how CREATE can be implemented in real-world projects, along with the expected outputs to guide developers.

Example 1: Basic Module Creation

Creating a simple module using the CREATE framework involves defining a core component that encapsulates specific functionality. Here’s an example of a counter module:

import { createModule } from 'create-framework';

const CounterModule = createModule({
  state: { count: 0 },
  reducers: {
    increment(state) {
      return { ...state, count: state.count + 1 };
    },
    decrement(state) {
      return { ...state, count: state.count - 1 };
    },
  },
  effects: {
    async fetchInitialCount() {
      const response = await fetch('/api/count');
      const data = await response.json();
      this.setState({ count: data.count });
    },
  },
});

export default CounterModule;

Expected Output: A counter component that can be incremented or decremented, with initial count fetched from an API endpoint.

Example 2: Combining Modules for Complex Functionality

Multiple modules can be combined to create complex features. For instance, combining user authentication with data management modules:

import { createModule } from 'create-framework';

const AuthModule = createModule({
  state: { isAuthenticated: false, user: null },
  reducers: {
    login(state, user) {
      return { ...state, isAuthenticated: true, user };
    },
    logout() {
      return { isAuthenticated: false, user: null };
    },
  },
});

const DataModule = createModule({
  state: { data: [] },
  effects: {
    async fetchData() {
      const response = await fetch('/api/data');
      const data = await response.json();
      this.setState({ data });
    },
  },
});

export { AuthModule, DataModule };

Expected Output: An application that manages user login state and fetches data asynchronously, with modules working seamlessly together.

Example 3: State Persistence and Middleware

The CREATE framework supports middleware for logging, error handling, and state persistence. Here’s an example of adding persistence middleware:

import { createModule, applyMiddleware } from 'create-framework';
import persistenceMiddleware from 'create-framework/middleware/persistence';

const TodoModule = createModule({
  state: { todos: [] },
  reducers: {
    addTodo(state, todo) {
      return { ...state, todos: [...state.todos, todo] };
    },
    removeTodo(state, index) {
      const newTodos = [...state.todos];
      newTodos.splice(index, 1);
      return { ...state, todos: newTodos };
    },
  },
});

const persistedTodoModule = applyMiddleware(TodoModule, persistenceMiddleware({ key: 'todos' }));

export default persistedTodoModule;

Expected Output: The to-do list state persists across page reloads, thanks to middleware integration.

Conclusion

The CREATE framework provides a flexible and structured approach to application development. The examples above demonstrate how to create modules, combine functionalities, and enhance applications with middleware. By following these patterns, developers can build robust, scalable applications with predictable outcomes.