Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/objective-redux/objective-redux
Redux made better, objectively.
https://github.com/objective-redux/objective-redux
hooks object-oriented react reactjs redux redux-helper redux-saga redux-tools redux-wrapper slice
Last synced: about 1 month ago
JSON representation
Redux made better, objectively.
- Host: GitHub
- URL: https://github.com/objective-redux/objective-redux
- Owner: Objective-Redux
- License: mit
- Created: 2020-05-30T21:11:19.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T16:29:46.000Z (almost 2 years ago)
- Last Synced: 2024-12-04T21:14:18.549Z (about 1 month ago)
- Topics: hooks, object-oriented, react, reactjs, redux, redux-helper, redux-saga, redux-tools, redux-wrapper, slice
- Language: TypeScript
- Size: 18 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Objective Redux
### Redux made better, objectively.
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)
```javascript
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(
,
document.getElementById('root')
);
```
## Example Slice
```javascript
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 })
);
}
```
```javascript
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.
```typescript
// 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.
## 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.
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.
## 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.
## Keep your dependencies simple
### No direct dependencies
Objective Redux only requires peer dependencies on [Redux](https://www.npmjs.com/package/redux) and [React](https://www.npmjs.com/package/react).
Optionally, you can also add [Redux-Saga](https://www.npmjs.com/package/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
+
+
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._
## 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.