React-context-redux NPM

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

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.

import { createStore, applyMiddleware } from 'react-context-redux';
import logger from 'redux-logger';

const { Provider, connect } = createStore({someState: 'value'}, applyMiddleware(logger));

App.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from './store';
import LikeButton from './LikeButton';

const App = () => (
  <Provider>
    <LikeButton />
  </Provider>
);

ReactDOM.render(<App />, document.getElementById('counter_container'));

LikeButton.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 }) => (
  <button onClick={() => dispatch(increaseCount(count + 1))} type="button">
    {/* We have a redux-thunk like approach where you param for dispatch  is a function */}
    Liked {count} times
  </button>
);

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

class ProviderWrapper extends React.Component {
  render() {
    return e(Provider, this.props);
  }
}

ReactDOM.render(
  e(ProviderWrapper, {}, e(connect(select)(LikeButton))),
  document.getElementById('counter_container')
);