immer-reducer
Advanced tools
immer-reducer - npm Package Compare versions
Comparing version 0.5.0 to 0.5.1
| { | ||
| "name": "immer-reducer", | ||
| "version": "0.5.0", | ||
| "version": "0.5.1", | ||
| "description": "", | ||
@@ -27,4 +27,4 @@ "main": "lib/immer-reducer.js", | ||
| "devDependencies": { | ||
| "@types/jest": "^23.3.12", | ||
| "@types/react": "^16.7.18", | ||
| "@types/jest": "^23.3.13", | ||
| "@types/react": "^16.7.20", | ||
| "@types/react-dom": "^16.0.11", | ||
@@ -34,3 +34,3 @@ "@types/redux": "^3.6.0", | ||
| "jest": "^23.6.0", | ||
| "prettier": "^1.15.3", | ||
| "prettier": "^1.16.0", | ||
| "react": "^16.7.0", | ||
@@ -40,3 +40,3 @@ "react-dom": "^16.7.0", | ||
| "ts-jest": "^23.10.5", | ||
| "typescript": "~3.2.2" | ||
| "typescript": "~3.2.4" | ||
| }, | ||
@@ -47,4 +47,4 @@ "peerDependencies": { | ||
| "dependencies": { | ||
| "immer": "^1.10.5" | ||
| "immer": "1.x" | ||
| } | ||
| } |
| # immer-reducer | ||
| Create terse Type-Safe Redux reducers using [Immer](https://github.com/mweststrate/immer) and Typescript! | ||
| Create terse type-safe Redux reducers using [Immer](https://github.com/mweststrate/immer) and Typescript! | ||
| Read an introductory [blog post here](https://medium.com/@esamatti/type-safe-boilerplate-free-redux-906844ec6325). | ||
| ## Install | ||
| ## 📦 Install | ||
| npm install immer-reducer | ||
| ## Motivation | ||
| ## 💪 Motivation | ||
| Turn this 💩 | ||
| Turn this 💩 💩 💩 | ||
@@ -52,3 +52,3 @@ ```ts | ||
| into this! 🚀 | ||
| ✨✨ Into this! ✨✨ | ||
@@ -69,7 +69,7 @@ ```ts | ||
| **Without losing the type-safety!** 🔥 | ||
| 🔥🔥 **Without losing type-safety!** 🔥🔥 | ||
| Oh, and you get the action creators for free! 🤗 🎂 | ||
| ## Usage | ||
| ## 📖 Usage | ||
@@ -79,14 +79,6 @@ Generate Action Creators and the actual reducer function for Redux from the class with | ||
| ```ts | ||
| import {createStore} from "redux"; | ||
| import {createActionCreators, createReducerFunction} from "immer-reducer"; | ||
| const ActionCreators = createActionCreators(MyImmerReducer); | ||
| const reducerFunction = createReducerFunction(MyImmerReducer); | ||
| ``` | ||
| and create the Redux store | ||
| ```ts | ||
| import {createStore} from "redux"; | ||
| const initialState = { | ||
| const initialState: State = { | ||
| user: { | ||
@@ -98,3 +90,6 @@ firstName: "", | ||
| const store = createStore(reducerFunction, initialState); | ||
| const ActionCreators = createActionCreators(MyImmerReducer); | ||
| const reducerFunction = createReducerFunction(MyImmerReducer, initialState); | ||
| const store = createStore(reducerFunction); | ||
| ``` | ||
@@ -112,3 +107,3 @@ | ||
| ## Typed Action Creators! | ||
| ## 🌟 Typed Action Creators! | ||
@@ -135,9 +130,2 @@ This library by no means requires you to use Typescript but it was written | ||
| const initialState: State = { | ||
| user: { | ||
| firstName: "", | ||
| lastName: "", | ||
| }, | ||
| }; | ||
| reducer(initialState, ActionCreators.setFirstName("Charlie")); // OK | ||
@@ -148,3 +136,3 @@ reducer(initialState, {type: "WAT"}); // Type error | ||
| ## How | ||
| ## 🤔 How | ||
@@ -174,3 +162,3 @@ Under the hood the class is deconstructed to following actions: | ||
| ## Integrating with the Redux ecosystem | ||
| ## 🔄 Integrating with the Redux ecosystem | ||
@@ -181,4 +169,6 @@ To integrate for example with the side effects libraries such as | ||
| generated action type using the `type` property of the action creator | ||
| function: | ||
| function. | ||
| In redux-observable | ||
| ```ts | ||
@@ -201,4 +191,28 @@ // Get the action name to subscribe to | ||
| ## Examples | ||
| In redux-saga | ||
| ```ts | ||
| function* watchFirstNameChanges() { | ||
| yield takeEvery(ActionCreators.setFirstName.type, doStuff); | ||
| } | ||
| // or use the isActionFrom() to get all actions from a specific ImmerReducer | ||
| // action creators object | ||
| function* watchImmerActions() { | ||
| yield takeEvery( | ||
| (action: Action) => isActionFrom(action, ActionCreators), | ||
| handleImmerReducerAction, | ||
| ); | ||
| } | ||
| function* handleImmerReducerAction(action: Actions<typeof MyImmerReducer>) { | ||
| // `action` is a union of action types | ||
| if (isAction(action, ActionCreators.setFirstName)) { | ||
| // with action of setFirstName | ||
| } | ||
| } | ||
| ``` | ||
| ## 📚 Examples | ||
| Here's a more complete example with [redux-render-prop](https://github.com/epeli/redux-render-prop): | ||
@@ -208,3 +222,3 @@ | ||
| ## Helpers | ||
| ## 📓 Helpers | ||
@@ -211,0 +225,0 @@ The module exports following helpers |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.69%
21942
- Number of lines in readme file
- increased by5.24%
281
Dependency changes
Updatedimmer@1.x