react-context-redux
A Redux style wrapper over React's new Context API.
Installation
Just like React, react-context-redux also can be used through both NPM
and <script>
tag
npm i react-context-redux --save
<script src="https://unpkg.com/react-context-redux/umd/react-context-redux.min.js" crossorigin></script>
Or use it with a specific version you need
<script src="https://unpkg.com/react-context-redux@0.3.0/umd/react-context-redux.min.js" crossorigin></script>
Usage
You can use it the same way as redux provider and connect. Dispatch will be available as a prop by default when connect is used.
store.js
; const Provider connect = ;
It has middleware support too, works the same way as how redux middleware works. Just import applyMiddleware
, include your favorite middlewares as parameters and pass it to createStore
, and it will work like a charm.
;; const Provider connect = ;
App.js:
;;;; const App = <Provider> <LikeButton /> </Provider>; ReactDOM;
LikeButton.js:
;; const increaseCount = { // while dispatching we expect to things two be present in the param object // key - path to be updated in state ( separated by . ) // payload - value to be put on that path // if some keys specified in the path are not available we will create them return { ; };}; const LikeButton = <button onClick= type="button"> /* We have a redux-thunk like approach where you param for dispatch is a function */ Liked count times </button>; const select = { return count: statelikecount ;}; selectLikeButton;
Note: While using react-context-redux through a script tag, make sure to wrap the provider
index.js
Component { return ; } ReactDOM;
Examples
See /examples
folder for more examples
Contribution
Contributions are awesome. Go through our Contribution Guide to get started.
LICENSE
MIT