https://github.com/jefreesujit/react-context-redux
A Redux style wrapper over React's Context API
https://github.com/jefreesujit/react-context-redux
context context-api middleware react redux state store
Last synced: 4 months ago
JSON representation
A Redux style wrapper over React's Context API
- Host: GitHub
- URL: https://github.com/jefreesujit/react-context-redux
- Owner: Jefreesujit
- License: mit
- Created: 2018-06-29T15:22:38.000Z (almost 8 years ago)
- Default Branch: develop
- Last Pushed: 2023-03-02T01:51:31.000Z (over 3 years ago)
- Last Synced: 2025-03-14T06:06:21.893Z (over 1 year ago)
- Topics: context, context-api, middleware, react, redux, state, store
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-context-redux
- Size: 993 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-context-redux
[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
A Redux style wrapper over React's new [Context API](https://reactjs.org/docs/context.html).
## Installation
Just like React, react-context-redux also can be used through both `NPM` and `` tag
```
npm i react-context-redux --save
```
```
<script src="https://unpkg.com/react-context-redux/umd/react-context-redux.min.js" crossorigin>
```
Or use it with a specific version you need
```
```
## 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**
```js
import { createStore } from 'react-context-redux';
export const { Provider, connect } = createStore({ // pass your initial state
like: {
count: 0
}
});
```
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.
```js
import { createStore, applyMiddleware } from 'react-context-redux';
import logger from 'redux-logger';
const { Provider, connect } = createStore({someState: 'value'}, applyMiddleware(logger));
```
**App.js:**
```js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from './store';
import LikeButton from './LikeButton';
const App = () => (
);
ReactDOM.render(, document.getElementById('counter_container'));
```
**LikeButton.js:**
```js
import React from 'react';
import { connect } from './store';
const increaseCount = value => {
// 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 dispatch => {
dispatch({
key: 'like.count',
payload: value
});
};
};
const LikeButton = ({ count, dispatch }) => (
dispatch(increaseCount(count + 1))} type="button">
{/* We have a redux-thunk like approach where you param for dispatch is a function */}
Liked {count} times
);
const select = state => {
return {
count: state.like.count
};
};
export default connect(select)(LikeButton);
```
`Note: While using react-context-redux through a script tag, make sure to wrap the provider`
**index.js**
```js
class ProviderWrapper extends React.Component {
render() {
return e(Provider, this.props);
}
}
ReactDOM.render(
e(ProviderWrapper, {}, e(connect(select)(LikeButton))),
document.getElementById('counter_container')
);
```
## Examples
See `/examples` folder for more examples
## Contribution
Contributions are awesome. Go through our [Contribution Guide](CONTRIBUTING.md) to get started.
## LICENSE
MIT
[npm-image]: https://badge.fury.io/js/react-context-redux.svg
[npm-url]: https://npmjs.org/package/react-context-redux
[travis-image]: https://travis-ci.org/Jefreesujit/react-context-redux.svg?branch=master
[travis-url]: https://travis-ci.org/Jefreesujit/react-context-redux
[daviddm-image]: https://david-dm.org/Jefreesujit/react-context-redux.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/Jefreesujit/react-context-redux