Make organizing and managing your Redux store easy.
npm install --save redux redux-saga objective-redux
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')
);
import { StateController } from 'objective-redux';
const initialState = { isOn: false };
export class SwitchStateController extends StateController {
constructor(objectiveStore) {
super(initialState, objectiveStore);
}
static getName() {
return 'switch';
}
setSwitch = this.registerAction(
(state, isOn) => ({ isOn })
);
}
SwitchOneController.getInstance(objectiveStore).setSwitch(true);
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.
Objective-Redux replaces many of the packages you’re already using.
For example, instead of React-Redux + Redux-Injectors + Redux-Toolkit
you can simply use Objective-Redux
Bundle sizes vary based on how much of the package is unused and how effectively your bundler can remove the unused portions.
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.registerAction(
(state, payload) => ({
...state,
value: payload.value,
})
);
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.
[](https://github.comDownload Details:
Author:
Demo:
Source Code: /Objective-Redux/Objective-Redux/blob/master/statics/debugging.png)
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.
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.
See the Code Splitting and Lazy Loading topics in the documentation for more.
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.
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.
You can connect your components to Objective-Redux to inject props from the store. Or, skip the connection process and use React hooks, instead.
Author: Objective-Redux
Source Code: https://github.com/Objective-Redux/Objective-Redux
#react #redux #javascript #reactjs