https://github.com/kolodziejczak-sz/svelte-redux-connect

redux binding to svelte
https://github.com/kolodziejczak-sz/svelte-redux-connect

Last synced: about 1 month ago
JSON representation

redux binding to svelte

• Host: GitHub
• URL: https://github.com/kolodziejczak-sz/svelte-redux-connect
• Owner: kolodziejczak-sz
• Created: 2019-09-25T20:08:16.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:34:26.000Z (almost 2 years ago)
• Last Synced: 2024-09-30T09:40:52.119Z (about 1 month ago)
• Language: JavaScript
• Size: 739 KB
• Stars: 17
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# svelte-redux-connect

Svelte bindings for Redux.

Connect API based on react-redux.

This library lets you use Redux without any constraints or awkward store subscription management.

I've recreated the solution from react-redux - the connect API is almost identical.

I'm aware of the fact that there's already npm-packages which are trying to accomplish the same goal, but actually I don't think they work as they should be - I tried them and I had to either use the Svelte's store, change the API or take care of the store subscription in the body of connected component. This tiny library is the answer to the above problems, and I decided to share my work with everyone.

Basic example below.

```js

// App.svelte

  import { Provider } from "svelte-redux-connect";

  import store from "./store.js"; // redux store

  import Todos from "./Todos";

  

// Todos/index.js

import { createSelector } from "reselect";

import { connect } from "svelte-redux-connect";

import Todos from "./Todos.svelte";

const selectTodos = state => state.todos;

const selectUndoneTodos = createSelector(

  selectTodos,

  todos => todos.filter(t => !t.done)

);

const addTodo = text => ({ type: "ADD_TODO", text });

const mapStateToProps = state => ({

  todos: selectUndoneTodos(state)

});

const mapDispatchToProps = {

  addTodo

};

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

// Todos/Todos.svelte

  export let addTodo;

  export let todos;

  let text = "";

 addTodo(text)}>add todo



  {#each todos as t}

    
{t}

  {/each}



```


If you're interested in docs you can rely on the https://react-redux.js.org/api/connect#overview

Although there's little differences:

-   there's no support for 2 options fields: forwardRef and pure because the author consider them as React specific,

-   the implementation consider all components as pure in the context of areStatesEqual, areOwnPropsEqual, areStatePropsEqual, areMergedPropsEqual functions default behavior,

-   the counterpart of option options.context is options.store

Feel free to submit any issue or a PR.