salsita / prism

React / Redux action composition made simple http://salsita.github.io/prism/
496 stars 24 forks source link

[feature request] Global actions #41

Open jmarceli opened 8 years ago

jmarceli commented 8 years ago

As described in #40 it will be nice to have an option of defining global actions. This is handy feature especially for integration with other react/redux libraries as they dispatch non-prefixed actions (e.g. react-router-redux).

I think that there are two options of global actions handling:

  1. Built in redux-elm feature, enabled with some configuration options
  2. Standalone package named e.g. redux-elm-global, which is mounted at the root application updater like any other redux-elm component

I think I would prefer standalone package as it is more modular approach and global actions feature is definitely not required by all redux-elm users.

I've created this issue to gather some opinions about this topic, so please write what do you think about it.

eliperelman commented 8 years ago

I don't think a separate global package is necessary. If this were to be a thing, I think just having the right API in this library would be enough.

tomkis commented 7 years ago

I kinda like an idea of allowing user to dispatch global actions, it may seem like a hack, but it's not, because redux-elm works very well with model in form of tree, but doesn't work well with normalized data (which may eventually be handy) so I perceieve this as a bridge between these two approaches.

dgsunesen commented 7 years ago

Where are we with this?

I have a case where I have a wrapper App component which updater looks something like this:

declare function require(name: string): any;

import { takeEvery } from "redux-saga";
import { take, put, call, fork, select, Effect } from "redux-saga/effects";
import { Map } from "immutable";

const { Updater } = require("redux-elm");

// Initial immutable model/state passed to the Updater.
type Init = () => Map<string, any>;
export const init: Init = () => Map({
  isSidebarOpen: false,
  isOptionsOpen: false
});

export default new Updater(init())
  .case("TOGGLE_SIDEBAR", model => model.set("isSidebarOpen", !model.get("isSidebarOpen")))
  .case("TOGGLE_OPTIONS", model => model.set("isOptionsOpen", !model.get("isOptionsOpen")))
  .toReducer();

How would I dispatch an action for TOGGLE_SIDEBAR from within a nested elm component from whereever in my app?

Right now, if I dispatch({type: "TOGGLE_SIDEBAR"}) from a nested elm component UserView, it actually dispatches UserView.TOGGLE_SIDEBAR..

Is it possible somehow to solve this?

Is it even possible?

dvshur commented 7 years ago

@dgsunesen, have you tried using a custom matcher?

http://salsita.github.io/redux-elm/custom-matchers/writing-custom-matcher.html

Using it, for example, you could listen to any event than ends with TOGGLE_SIDEBAR (however deeply nested in a tree) in a parent/grandparent updater.

I'm not sure if this approach would cover every possible use case, but sometimes you can get away with it.

dgsunesen commented 7 years ago

@dvshur - Thanks. I'll let you know if this solves my problem :-)

qbolec commented 7 years ago

How would one solve this problem in Elm?

Btw. I've found this project while trying to find an answer to my question about reusable components in Redux. I guess you are very qualified to answer it.

jcheroske commented 7 years ago

I don't know if this library has an answer to that issue. There are many libraries that attempt to bring elm-like composition to redux, and some do address this. Check out redux-subspace for an example.

On Sat, Jul 29, 2017 at 5:45 AM qbolec notifications@github.com wrote:

How would one solve this problem in Elm?

Btw. I've found this project while trying to find an answer to my question https://stackoverflow.com/questions/45368154/how-to-organize-redux-state-for-reusable-components about reusable components in Redux. I guess you are very qualified to answer it.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/salsita/prism/issues/41#issuecomment-318828777, or mute the thread https://github.com/notifications/unsubscribe-auth/ADgUytGj3_qmdxqgsiet5SW6i9YJMjAhks5sSylfgaJpZM4JZe9D .