developit/preact-redux

:loop: Preact integration for Redux (no shim needed!)

preact-redux

Wraps react-redux up for Preact (8.x and prior), without using preact-compat. Think of this as a version of react-redux that is pre-aliased to use preact in place of React.

See preact-redux-example: a full working example of redux + preact using preact-redux!

💁‍ Compatibility Note:

If you're using Preact X (preact@10+), please use the official react-redux library.

---

Usage Example

This is a contrived example. Please refer to Redux's Usage with React documentation for details on how to work with Redux from Preact.

import { Provider, connect } from 'preact-redux';
import { h, render } from 'preact';

const Main = () => (
	<Provider store={store}>
		<Child />
	</Provider>
);

const Child = connect(
	state => state
)( ({ text, setText }) => (
	<input value={text} onInput={e => setText(e.target.value)} />
) );

render(<Main />, document.body);

---

License

MIT

preact-redux's Issues

Improve documentation or maybe the code itself

Hi thanks for the package, but I think there's something wrong with the examples.

In the README you say

import { Provider, connect } from 'preact-redux';

but it should probably be

import redux from 'preact-redux';
redux.connect();

That's because in rollup config you only export default.

Maybe a better way is to change that line to

import * as lib from './index'; export default lib; export { Provider, connect, connectAdvanced } from './index';

The reason I'm saying this is because in webpack I get the error "export 'Provider' was not found in 'preact-redux'

Also it's a bit weird that you're transpiling all the way down to ES3. Would be nice to find a solution to preactjs/preact#269 and standardise what ES version is exported by module or jsnext:main, honestly I'd like to have a way to use ES6 directly, no transpilation. I can then babel-ify my node modules according to the browsers I'm going to support.

npm dependencies not being installed

The dev dependencies are no longer being installed properly.

Bad bundling

The bundling even with the sourcemaps of the generated file can't be properly interpreted by Webstorm.

This leads to it saying connect and Provider cannot be found

It still works, but I'm constantly getting a warning

preact-redux 2.1.0 not working with preact-router when passing route values

First I would like to note: PREACT is fantastic, that is why we have put forth great effort to continue using it.

Our app is now lightning fast due to the great work at PREACT, PREACT-REDUX and the PREACT-CLI – keep it up!!.

We had a very similar issue to this so we decided to post an example hoping that the owners of PREACT-REDUX will see it clearly, and have a fast path to remedy.

First I created the “brandnew” app (brandnew.zip) (using preact-cli version 2.2.1)

• preact create default brandnew

I then created a simple example that would work, DemoIssue and AnotherComponent are the two components that should display what is given in the route parameters when the links Demo 1 or Demo 2 are clicked.

Alas it works :)

Then I added redux to the mix

• npm install redux --save
• npm install preact-redux –save
• npm install preact-context –save (This can be removed later..read on)

This installs preact-redux: “^2.1.0

I then added a simple example of wiring up to redux (Nothing fancy, just a counter to prove it works).

Alas it is broken, hmmmm?

At this point in the app, I could comment out the redux connect in demo-issue.js and simply use the “export default DemoIssue” and it would still work, however we really need redux…

After trial and error we figured out that if we revert to
preact-redux 2.0.3 – NOT preact-redux ^2.0.3 – the app works as expected!!!.

Now that we have gone back to 2.0.3 you can safely remove preact-context as it is no longer a dependency.

Hope that helps in figuring out what is really wrong.

huge filesize overhead - twice the size of react+redux implementation?

hi!

we're considering using preact + preact-redux as an alternative to react + react-redux. This is pretty much solely due to bundle size savings migrating to preact.

However preact-redux seems to take up a crazy amount of space. On a fresh preact-cli app with only 1 additional dependency outside of redux and preact-redux, preact-redux is 35% of the total bundle size at 41.8KB on a production build. Way larger than preact, preact-router, polyfills, etc.

Meanwhile in a react app production build I am seeing redux @ 5.76KB + react-redux @ 11.79KB === 17.55KB total, versus preact-redux's 41.9KB. Something doesn't seem right here!

Both are using latest versions of respective libraries (Redux + react/preact-redux).

any ideas how we can bring this bundle size down? It's unclear to me why this would be over twice the filesize.

Readme example

Is broken because it does not show where 'store' comes from

I had a problem immediately after i installed react helmet this error came up

Compiled with problems:

ERROR in ./node_modules/react-router/esm/react-router.js 452:30-48

export 'isValidElementType' (imported as 'isValidElementType') was not found in 'react-is' (module has no exports)

Preact X, preact-redux is not working..

Preact, 10.0.0-alpha.2
preact-redux is not working, react-redux work properly

There is No Error, Just There is <Provider/> without children(<App/>)
Check Plz

Can't resolve 'preact-context'

"preact-redux": "2.1.0" (2.0.3 works fine),

ERROR in ./node_modules/preact-redux/dist/preact-redux.esm.js
Module not found: Error: Can't resolve 'preact-context' in .\node_modules\preact-redux\dist'
@ ./node_modules/preact-redux/dist/preact-redux.esm.js 2:0-47 55:17-30

'Provider' is not exported

I ran in an issue where following error is thrown:

Error: 'Provider' is not exported by node_modules/preact-redux/dist/preact-redux.js
    at error (/Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:170:12)
    at Module.error$1 [as error] (/Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:8007:2)
    at Module.trace (/Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:8106:9)
    at ModuleScope.findDeclaration (/Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:7691:22)
    at Node.bind (/Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:6743:29)
    at /Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:5291:50
    at Node.eachChild (/Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:5305:19)
    at Node.bind (/Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:5291:7)
    at Node.bind (/Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:6040:23)
    at /Users/dominik/code/material-explorer/node_modules/rollup/dist/rollup.js:5291:50

My implementation:

import preact from 'preact';
import {Provider} from 'preact-redux';
import {createStore} from 'redux';

// Components
import App from './components/app.jsx';

const store = createStore();


preact.render(
  <Provider store={store}>
    <App />
  </Provider>, 
  document.getElementById('app'));

Can someone confirm this error?

No d.ts file.

There isn't a typings file currently for preact-redux, which is a shame.

However it's only a micro layer around react-redux, which already has a typing, so it should be fairly easy to fix.

npm installs 1.2.0?

I get 1.2.0 unless I specify:
npm install preact-redux@latest
that shouldn't be necessary, right?

Uncaught TypeError: store.getState is not a function

Uncaught TypeError: store.getState is not a function
    at Object.runComponentSelector [as run] (preact-redux.esm.js?1530:372)
    at Connect.initSelector (preact-redux.esm.js?1530:525)
    at new Connect (preact-redux.esm.js?1530:466)
    at createComponent (preact.js?10a9:214)
    at renderComponent (preact.js?10a9:280)
    at renderComponent (preact.js?10a9:284)
    at setComponentProps (preact.js?10a9:248)
    at buildComponentFromVNode (preact.js?10a9:339)
    at idiff (preact.js?10a9:134)
    at diff (preact.js?10a9:109)

import { Provider, connect } from 'preact-redux';
import { h, render } from 'preact';

const Main = () => (
    <Provider store={store}>
        <Child />
    </Provider>
);
 
const Child = connect(
    state => state
)( ({ text, setText }) => (
    <input value={text} onInput={e => setText(e.target.value)} />
) );
 
render(<Main />, document.body);

"devDependencies": {
    "eslint": "^4.5.0",
    "eslint-config-synacor": "^1.1.0",
    "if-env": "^1.0.0",
    "preact-cli": "^2.0.0"
  },
  "dependencies": {
    "http-build-query": "^0.7.0",
    "preact": "^8.2.1",
    "preact-compat": "^3.17.0",
    "preact-redux": "^2.0.3",
    "redux": "^4.0.1"
  }

TS: AnyComponent has Problem

preact-redux/src/preact-redux.d.ts

Line 23 in 0b98ca3

(component: AnyComponent<TProps, {}>): ComponentConstructor<TOwnProps, {}>;

AnyComponent may be ComponentConstructor in preact-redux.d.ts

Fix rollup bundling

I'm really intrigued by the preact community but got a bit of a trouble making preact-redux work in combination with rollup.

Bundling with rollup always leads to the following error:

Module /Users/marvinhagemeister/dev/myproject/node_modules/preact-redux/dist/preact-redux.js does not export connect (imported by /Users/marvinhagemeister/dev/myproject/src/popup.js)
Error: Module /Users/marvinhagemeister/dev/myproject/node_modules/preact-redux/dist/preact-redux.js does not export connect (imported by /Users/marvinhagemeister/dev/myproject/src/popup.js)
    at Module.trace (/Users/marvinhagemeister/dev/myproject/node_modules/rollup/src/Module.js:666:30)
    at /Users/marvinhagemeister/dev/myproject/node_modules/rollup/src/Module.js:218:35
    at Array.forEach (native)
    at /Users/marvinhagemeister/dev/myproject/node_modules/rollup/src/Module.js:215:25
    at Array.forEach (native)
    at Module.bindAliases (/Users/marvinhagemeister/dev/myproject/node_modules/rollup/src/Module.js:204:29)
    at /Users/marvinhagemeister/dev/myproject/node_modules/rollup/src/Bundle.js:95:44
    at Array.forEach (native)
    at /Users/marvinhagemeister/dev/myproject/node_modules/rollup/src/Bundle.js:95:18

I tried importing src/index.js directly and installed react-redux but that in turn wants to use react and so on...

The best solution seems to be to provide an esnext bundle of preact-redux.

Duplicated typings with preact v8.4.1?

The updated typings work great for preact v8.3.1 but in v8.4.1 there seems to be a bit of an overlap. I have documented the issue here. I have 2 separate builds with preact installed, and the one with preact v8.4.1 and no preact-redux seems to build fine, but the one with preact-redux throws a bunch of errors. I'll look into the issue, but if anyone has some thoughts about what may be the issue that would be super!

Partially connected component is not updated in 2.1.0

Hi! Can't wrap my head around simple issue:
Given we have a component and and its connected counterpart, the latter is not updated when it receives props.

Made reproducible:
https://codesandbox.io/s/sharp-moore-l1gcq

Am I doing something wrong? I've tried all combinations of withRef and pure and still no luck. Also everything works fine in 2.0.3.

Thanks!

Stale Repo?

This repo hasn't seen updates in a while. Any updates?

Error with redux 4.0.0: Type 'S' does not satisfy the constraint 'Action<any>'

Using Redux 4.0.0 some errors occur while bundling a typescript/preact/preact-redux project.

Versions I'm using:

[email protected]
[email protected]"

The errors:

ERROR in [at-loader] ./node_modules/preact-redux/src/preact-redux.d.ts:19:23
    TS2344: Type 'S' does not satisfy the constraint 'Action<any>'.

ERROR in [at-loader] ./node_modules/preact-redux/src/preact-redux.d.ts:214:25
    TS2344: Type 'S' does not satisfy the constraint 'Action<any>'.

I found a similar issue here: redux-observable/redux-observable#449

Build fails: 'isValidElementType' is not exported by `react-is`

I cloned the repo and ran yarn. This runs (among others) the build command, which in turn runs (among others) the transpile:umd command, which fails like so:

$ rollup -c --environment FORMAT:umd
🚨   'isValidElementType' is not exported by node_modules/react-is/index.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
node_modules/react-redux/src/components/connectAdvanced.js (4:9)
2: import invariant from 'invariant';
3: import { Component, createElement } from 'react';
4: import { isValidElementType } from 'react-is';
            ^
5: 
6: import Subscription from '../utils/Subscription';

error Command failed with exit code 1.

Node v10.15.1
npm v6.9.0
yarn v1.15.2
Ubuntu v18.10

Combine Reducers

how to combine 4 reducers in preact-redux?

[ts] connect() types don't work for class Components

Typings work fine for SFCs, but when a user tries to connect any kind of class based component, there's a type mismatch error.

import { h, Component } from 'preact';
import { connect } from 'preact-redux';
import { AppState } from './store';

interface AppProps {
  foo: string;
}

class App extends Component<AppProps,{}> {
  render() {
    return (
      <div className="app-component">hello{this.props.foo}</div>
    )
  }
}

const mapStateToProps = (state: AppState) => ({
	todos: state.todos
});
export default connect(mapStateToProps)(App);

I get the following error

src/app.tsx(25,47): error TS2345: Argument of type 'typeof App' is not assignable to parameter of type 'AnyComponent<{ todos: { id: string; text: string; }[]; } & DispatchProp<any>, {}>'.
  Type 'typeof App' is not assignable to type 'FunctionalComponent<{ todos: { id: string; text: string; }[]; } & DispatchProp<any>>'.
    Type 'typeof App' provides no match for the signature '(props?: ({ todos: { id: string; text: string; }[]; } & DispatchProp<any> & ComponentProps<FunctionalComponent<{ todos: { id: string; text: string; }[]; } & DispatchProp<any>>>) | undefined, context?: any): Element'.

There are at least two things that need to be fixed in order for typescript to be used with this library in strict/no-implicit-any mode

• Make Provider#props an optional property - #22
• Fix the AnyComponent type definition so that it works with more than just functional components - preactjs/preact#905

Don't overwrite passed props to mapDispatchToProps with the default

I found an unexpected behavior when defining second argument received by mapDispatchToProps to have a default value.
The default value is always passed to it, even though other props are defined on the component.

I created a test to demonstrate it: oskarhane@b0a2b89

If the default is removed:
let mapDispatchToProps = (d, p = {}) => { to
let mapDispatchToProps = (d, p) => {
it works as expected.

Error with Typescript >= 2.9: Type 'keyof T' does not satisfy the constraint 'string'

Using Typescript >= 2.9 an error occurs while bundling a typescript/preact/preact-redux project due to some breaking changes regarding keyof.

Versions I'm using:

[email protected]
[email protected]

The error:

ERROR in [at-loader] ./node_modules/preact-redux/src/preact-redux.d.ts:16:48
    TS2344: Type 'keyof T' does not satisfy the constraint 'string'.
  Type 'string | number | symbol' is not assignable to type 'string'.
    Type 'number' is not assignable to type 'string'.

A quick fix suggested over at microsoft/TypeScript#25260 (comment) is to set "keyofStringsOnly": true in the tsconfig.json

UMD Build: redux is undefined

When using it from a CDN, redux is undefined because the redux global variable is capitalized.
"Redux" not "redux".

Error when using --strictNullChecks Typescript's compiler option

I created a simple project via preact-cli, added the typescript plugin, redux and preact-redux, but i got this error when running npm run start:

✖ ERROR [at-loader] ./node_modules/preact-redux/src/preact-redux.d.ts:278:5
    TS2416: Property 'render' in type 'Provider' is not assignable to the same property in base type 'Component<ProviderProps, {}>'.
  Type '(props: ProviderProps) => VNode' is not assignable to type '(props?: (ProviderProps & ComponentProps<this>) | undefined, state?: {} | undefined, context?: an...'.
    Types of parameters 'props' and 'props' are incompatible.
      Type '(ProviderProps & ComponentProps<this>) | undefined' is not assignable to type 'ProviderProps'.
        Type 'undefined' is not assignable to type 'ProviderProps'.

Tag new release

Hey.

This issue is just a reminder to tag a new release for this project, as there are already a bunch of fixes that are available only on master and that would be good to have on a tagged release, like fixes for #31 and #32, for example.

Thanks. :)