Wondering what’s next for npm?Check out our public roadmap! »

    objective-redux
    TypeScript icon, indicating that this package has built-in type declarations

    0.28.2 • Public • Published

    Objective Redux

    Redux made better, objectively.

    NPM Version License Types included
    bundle size build status

    Make organizing and managing your Redux store easy.



    Meet your new Redux API

    Install

    npm install --save redux redux-saga objective-redux
    

    Setup (for React)

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { ObjectiveStoreProvider, ObjectiveStore } from 'objective-redux';
    import App from './app';
    
    export const objectiveStore = new ObjectiveStore();
    
    ReactDOM.render(
      <ObjectiveStoreProvider objectiveStore={objectiveStore}>
        <App />
      </ObjectiveStoreProvider>,
      document.getElementById('root')
    );

    Example Slice

    import { StateController } from 'objective-redux';
    
    const initialState = { isOn: false };
    
    export class SwitchStateController extends StateController {
      constructor() {
        super(initialState);
      }
    
      static getName() {
        return 'switch';
      }
    
      setSwitch = this.createReducingAction(
        (state, isOn) => ({ isOn })
      );
    }
    SwitchStateController.getInstance(objectiveStore).setSwitch(true);


    Start using it now

    You can read the full documentation for more detailed information, along with examples.

    In addition, you can take a look at the example apps in the project's GitHub repository.



    Why use Objective-Redux?


    Drop the boilerplate code

    Actions are a thing of the past— among other things

    Object-Redux largely removes the need for action names, actions, switch-statement-reducers, selectors, and dispatching. You just need to write the mutating functions. Objective-Redux can take it from there.

      // Define your mutation and forget about the rest.
      myAction = this.createReducingAction(
        (state, payload) => ({
          ...state,
          value: payload.value,
        })
      );

    Easy Debugging

    No more global searches for action names

    Using Objective-Redux, your editor knows exactly where to find everything. That means you get intellisense, jump to definition, and more. Plus, your actions and reducer will never get out-of-sync.

    Debugging in VS Code


    Powerful code splitting and lazy loading

    Get the pieces of state you need, when you need them

    Stop wiring-up your reducers and sagas manually. And, for that matter, stop using large middleware package to help. Objective-Redux will take care of it for you, and it will do it on demand, dynamically, at runtime. Your store no longer needs to know about what's in it, leaving you free to move parts around as needed.

    Lazy load reducers and controller when you need them

    You can even use the pre-dispatch hook to load bundles when an action is fired. This allows you to fire actions that target controllers that haven't been downloaded, yet.

    Load bundles at runtime when an action targets a controller in the bundle

    See the Code Splitting and Lazy Loading topics in the documentation for more.


    Organize your state

    One slice, one object

    Each controller class represents a slice, giving an intuitive way for developers to look at and conceptualize the state.

    A slice of state never needs to know about what other slices are doing or how they're organized.

    organize reducing function into a single class that represents a slice


    Keep your dependencies simple

    No direct dependencies

    Objective-Redux only requires peer dependencies on Redux and React.

    Optionally, you can also add Redux-Saga for StatelessControllers.


    Keep your bundle small

    Lots of features, one small package

    Objective-Redux replaces many of the packages you're already using.

    For example, instead of React-Redux + Redux-Injectors + Redux-Toolkit

    react-redux bundle size + redux-injectors bundle size + redux-toolkit bundle size

    you can simply use Objective-Redux

    objective-redux bundle size

    Bundle sizes vary based on how much of the package is unused and how effectively your bundler can remove the unused portions.


    Compatible with React-Redux

    Migrate over time

    You can use Objective-Redux and React-Redux together. The ObjectiveStore is a decorated Redux store object and can be used to dispatch, subscribe, getState, and even replaceReducer. Simply pass the ObjectiveStore to the React-Redux provider and use it normally.

    See the Use with React-Redux topic in the documentation for more.


    Multiple ways to connect

    Inject properties or use hooks

    You can connect your components to Objective-Redux to inject props from the store. Or, skip the connection process and use React hooks, instead.

    Install

    npm i objective-redux

    DownloadsWeekly Downloads

    170

    Version

    0.28.2

    License

    MIT

    Unpacked Size

    167 kB

    Total Files

    78

    Last publish

    Collaborators

    • avatar