Redux Store Setup CLI

redux-store-setup is a simple command-line tool that helps you quickly set up the basic structure of a Redux store for your React application. It generates folders and files for actions, reducers, and store configuration, making it easy to start managing state in your project.

Installation

You can install the package globally using npm:

npm install -g redux-store-setup

Usage

After installing the package, use the setup-store command to generate the Redux store structure in your project. You can specify the directory where you want the boilerplate to be created:

setup-store --directory src/redux

or use the shortened version:

setup-store -d src/redux

This command will generate the following structure in the directory you specify:

src/redux/
├── actions/
│   ├── actions.js
│   └── types.js
├── reducers/
│   ├── reducer.js
│   └── store.js

Example

If you run the command with the following:

setup-store --directory src/redux

The tool will create the folder src/redux/ with the following files:

• actions/types.js: Defines action types such as COUNT.
• actions/actions.js: Contains action creators like setCount().
• reducers/reducer.js: Handles state changes based on actions.
• reducers/store.js: Combines the reducers into a single root reducer.

How to Integrate

After generating the Redux setup files, you can integrate them into your React application.

1. Configure the Store in Your Application:

In your main application file (e.g., src/index.js), you can import the generated store.js and integrate it with your app:

import { createStore } from 'redux';
import rootReducer from './redux/reducers/store';

const store = createStore(rootReducer);

2. Use the Actions and Reducers:

You can dispatch actions and manage the state using the generated actions and reducers.

Example:

import { setCount } from './redux/actions/actions';

// Dispatch the action
store.dispatch(setCount(5));

// Get the updated state
console.log(store.getState().count);  // Output: 5

Structure Explanation

• actions/types.js: Defines the constants used as action types (e.g., COUNT).
• actions/actions.js: Contains the action creator setCount() for updating the count state.
• reducers/reducer.js: Manages the state for count based on the dispatched action.
• reducers/store.js: Combines all reducers into a single root reducer for the Redux store.

Example Redux Flow

1. Dispatch an action using an action creator from actions/actions.js.
2. The action type is matched in reducers/reducer.js.
3. The state is updated accordingly and managed in the Redux store.

Credits

Created by Qasim Saeed

Offer Me a Coffee

If you like my work and want to support me, you can buy me a coffee!