Skip to content

Latest commit

 

History

History
37 lines (31 loc) · 1.15 KB

File metadata and controls

37 lines (31 loc) · 1.15 KB

Using withReducer

As there are slight implementation additions, instead of using recompose/withReducer we can achieve the same with just recompose/withState + useReducer middleware from this library.

import React from 'react';
- import { compose, withReducer } from 'recompose';
+ import { compose, withState } from 'recompose';
+ import { withMiddleware, useReducer, useDevtools } from 'with-middleware';
import { logger, initialState, reducer } from '../shared';

const enhance = compose(
- withReducer('store', 'dispatch', reducer),
+ withState('store', 'dispatch'),
  withMiddleware('store', 'dispatch', [
     middlewareFunction1,
     middlewareFunction2,
+    useDevtools('desired name'), // integration with redux-devtools-extension
+    useReducer(reducer) // should be the last middleware
  ])
);

const Counter = enhance(({ state, dispatch }) => (
  <div>
    Count: {state.count}
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
  </div>
));

export default Counter;

To run example, please refer to examples/README.md