Giter VIP home page Giter VIP logo

redux's Introduction

Logux

Logux contains multiple projects: core, Node.js server, Redux, and Vuex bindings, syntax sugar for Ruby and Django. This repository is the central hub to track big epics affecting several projects and provide support for end-users.

If you found a bug or need help in Logux best practices, this is the best place to create an issue.

redux's People

Contributors

ai avatar betalb avatar canrau avatar dangreen avatar decathectzero avatar dependabot[bot] avatar effervescentia avatar euaaaio avatar vkalinichev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

redux's Issues

redux-immutable support

Is seems that there is a problem with replacing reducer when using redux-immutable. Consider example:

import createLoguxCreator from 'logux-redux/create-logux-creator';
import { combineReducers } from 'redux-immutable';
const reducer = combineReducers({});

const createStore = createLoguxCreator({
  subprotocol: '1.0.0',
  server: 'ws://127.0.0.1:1337',
  userId: 10
});

const store = createStore(reducer);

This fails with error that ...previous state received by the reducer is of unexpected type. Expected argument to be an instance of Immutable.Collection or Immutable.Record... pointing to https://github.com/logux/logux-redux/blob/master/create-logux-creator.js#L155

Return the result of dispatch call to store

Hi! ๐Ÿ‘‹

Firstly, thanks for your work on this project! ๐Ÿ™‚

Today I used patch-package to patch @logux/[email protected] for the project I'm working on.

I'm trying to add support for dispatching thunks to our logux store on the client side. My approach has been to use redux-thunk-fsa so that all thunks have a type and the callback is passed as the payload. However in order for my components to access the results of the executed thunks requires returning the result of the dispatch operation.

Here is the diff that solved my problem:

diff --git a/node_modules/@logux/redux/create-store-creator/index.js b/node_modules/@logux/redux/create-store-creator/index.js
index 2d77ee5..b97b2cd 100644
--- a/node_modules/@logux/redux/create-store-creator/index.js
+++ b/node_modules/@logux/redux/create-store-creator/index.js
@@ -64,9 +64,10 @@ export function createStoreCreator(client, options = {}) {
 
       prevMeta = meta
       let prevState = store.getState()
-      originDispatch(action)
+      let result = originDispatch(action)
       emitter.emit('change', store.getState(), prevState, action, meta)
       saveHistory(meta)
+      return result
     }
 
     store.dispatch.local = (action, meta = {}) => {

This issue body was partially generated by patch-package.

Question: Why dispatch.sync applies action to the store asynchronously?

In Redux we have one useful guarantee: dispatch applies changes to the store synchronously. It means that we can get a new version of the state immediately after dispatching an action. But with dispatch.local or dispatch.sync it's achievable only by awaiting the result of the functions which actually kills the optimistic approach of applying changes.
I'm wondering was it an intentional design decision and if yes then what are the implications of applying changes synchronously (like in simple dispatch implementation).

Using with Redux Toolkit

Redux Toolkit is the recommended way of using (or at least start using) Redux nowadays. Redux Toolkit has its own version of createStore function called configureStore. It's a problem because logux/redux's createStoreCreator know nothing about it and there is no way to set it explicitly.

Troubles with dispatch types in connect

Redux's connect implores that dispatch is of type Redux.Dispatch, hence we can't use LoguxDispatch and code like this will produce errors:

connect(null, dispatch => ({
  doSomething: () => dispatch.sync({ type: 'SOME_ACTION' }) // Property 'sync' does not exist on type 'Dispatch<Action<any>>'
}))(SomeComponent)

Extracting MapDispatchToProps into separate variable with parameter type of LoguxDispatch also breaks things:

const mapDispatchToProps = (dispatch: LoguxDispatch<Action>) => ({
  doSomething: () => dispatch.sync({ type: 'SOME_ACTION' })
})

connect(null, mapDispatchToProps)(SomeComponent) // No overload matches this call

At the time I have no ideas how to solve this problem except // @ts-ignore, which is obviously bad.

One possible (but not so good) solution that comes to my mind is to export connect from @logux/redux with modified typescript signatures.

Different behaviour in different browsers

This example demonstrates that in some cases logux behaves differently in different browsers.

How to reproduce:
Clone this repo https://github.com/devgru/logux-firefox-behaviour
Install packages: yarn
Run logux server: node server.js
Run web-server: yarn start
Open http://localhost:3000 in a browser.

Page will display JSON state of redux store.

Expectations:

Page behave the same way in all modern browsers.

Result:

In Chrome we will see initial store state ({someState: 1}), in Firefox and Safari we get {}. Looks like reducer is called without action and with empty state ({}).

Subscribe channels

How to work the subscription channels? Now I call this:

store.dispatch.sync(
  { type: 'logux/subscribe', channel: 'user/:id' }
)

I need to create a reducer 'logux/subscribe'? What should he do?

Action undo fails when there is saved snapshot

When we are undoing last action and there is snapshot in stateHistory for action just before undoed, replay will fail

Steps to reproduce:

  1. Create store with saveStateEvery = 1
  2. Dispatch 2 actions
  3. Dispatch undo for last action

Expected: action undoed

Actualy: replay throws an error

Using with redux-devtools-extension

I am trying to use it with redux-devtools-extension and i am getting the following error:
Uncaught TypeError: a.subscribe is not a function

I then tried adding redux's subsribe method here:
https://github.com/logux/logux-redux/blob/master/create-logux-creator.js#L127

var middlewared = enhancer(function () {
  return {
    getState: store.getState,
+   subscribe: store.subscribe,
    dispatch: dispatch
  }
})(reducer, preloadedState)

This solves the issue but nowredux-devtools-extension does not seam to find any store.
Also using the normal store.dispatch throws an error.
Has anybody managed to combine logux-redux with redux-devtools-extension?

Add an API for on fly authentication

It is currently impossible to authenticate client after it's start which can be feasible for applications with guest access.

For example a chat app where user can view chat rooms as a guest but needs to log in to be able to participate. Now the only way is to refresh the whole app to restart the client with new credentials.

Use with react-redux

The README says store.dispatch() is legacy api and advises in favor of store.dispatch.local()/crossTab()/sync(), but react-redux passes the store's dispatch method in connect(). Is there a way to use the new methods in react-redux?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.