I'm receiving an error when trying to use createStore()

TypeError: __WEBPACK_IMPORTED_MODULE_1_react_waterfall___default(...) is not a function

Code:

import createStore from 'react-waterfall'
import * as Api from './Api'

const initialState = {
  user: null,
}

const actionsCreators = {
  getUser: async () => {
    const user = await Api.getUser()
    return user
  },
}

const config = {
  initialState,
  actionsCreators,
}

const store = createStore(config)


export const {
  Provider,
  connect,
  actions,
} = store

Looking at the source for this library it appears that components can subscribe but they can never unsubscribe. The list of subscriptions only increases this appears to be a memory leak.

To fix Consumer would need a componentWillUnmount method which removes the Consumer instance from subscribers.

The new Context works with Provider & Consumer, but though there is a Provider in the store created by createStore(), there is no Consumer anywhere... is that so? Shouldn't there be a Consumer to match the React specs?

If there shouldn't be a Consumer, maybe the Provider word should be changed, so users wouldn't expect the React Context way of working?

Trying to wrap my head around how to set this up for SSR, and I like the idea of having a single store.js that I can import from anywhere to get action creators or a Consumer.

However, when doing SSR, we want the state to be "fresh" for each request on the server. In particular when doing things outside of the context of a React tree. (i.e. next.js getInitialProps)

I'm not sure if a clear/reset mechanism is the answer here, or if there is a more elegant way achieve this. Thought i'd mention it here while I thought about it.

Are they like Redux's "reducers", meant to consume a state and a payload and return a new state without async or side effects? If this was your intention, then I would remove the ability for them to be async and change the example app to show them in use alongside some other code that handles the async logic. I would also rename them, my preference would be "setters".

Or are they like Redux's "action creators", intended to handle the main business logic of the app with async and side effects, and possibly modifying the state several times? If this was your intention, they need to be able to modify the state several times in one function (loading indicators etc), which cannot be done by returning the new state. It could be done by passing setState into every action.

I would prefer the second option, since I think the divide between action creators and reducers is a huge source of boilerplate in Redux. I have made a pull request here: #6

Desired but not covered by the existing documentation (#5 [1]).

Asynchronous (Promise-based) actions are supported but not documented (src/index.js#L34-L36 (2), #5 (comment) ([3])), already covered by the proposed tests contributed in #22 ([4]).

It should be possible for a developer to perform both synchronous and asynchronous side effects including I/O within react-waterfall actions but this is not documented. I am also not 100% convinced that this is the best way and would be happy to discuss some alternative ideas.

[1] #5
[2] https://github.com/didierfranc/react-waterfall/blob/master/src/index.js#L34-L36
[3] #5 (comment)
[4] #22

Hello, maybe I'm not implementing it the right way, but when I'm trying to set a value to my state with an action, the action is set in it instead.

Here an example : Click on the button should set the value "42" in the count, but console log in the action returns the actions, not the desired value.

Another example implementing the todolist example:

Trying to pass form value to the function via actions but actions not receiving the value.

Login.js
`
import {actions, connect } from '../../store';

class Login extends PureComponent {

handleSubmit = (e) => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log(values.email)
actions.testAction(values.email)
}
});

}
}

const WrappedLoginForm = Form.create()(Login);
export default connect(({ user }) => ({ user }))(WrappedLoginForm)
`

store.js
`
import createStore from 'react-waterfall';

const config = {
initialState: {
userLoggedIn: false,
user:{
email: "[email protected]"
}
},
actionsCreators: {
testAction: ({user}, newValue) => ({
user: { email: newValue }
}),
},
}

export const {Provider, connect, actions} = createStore(config);
`

This is where I would usually want to use it.

Thank you for your great work.
It seems that connect function does not use actions which is passed by Prevent, but the one under initStore.
Could you please explain why this is so?

Props is not sync with the connect and the component.

When i toggle a state change props changes inside the connect

But the changes doesnt reflect to the passed component

See. editVisible is true inside the connect but false in the child component

Working on converting a working v3 implementation to v4, but I'm having some issues.

I renamed actions in the config to actionsCreators and initStore to createStore. Then in my consuming component I also added actions to the import from the store.

My config looks like this:

const config = {
    initialState: {
        files: [],
    },
    actionsCreators: {
        addFile: (state, fileName) => {
            // ...
        }
    }
}

The function in the component triggering the action now looks like this (where it would first do this.props.actions...):

addFile = () => {
    actions.addFile(this.state.text);
}

But when the action is called the param fileName is an object containing all the actions instead of the provided value.

Am I missing something here or is something fishy going on? (Working in typescript / webpack so might also be a compilation issue?)

What are the benefits of using this code/approach? Thanks

A small suggestion: what about setting a default value state=>state for the mapStateToProps parameter? The definition of connect would then be:

const id = x => x;
const connect: CreateConnect = Consumer => (mapStateToProps = id) => WrappedComponent => {

and would let you write Count = connect()(Count) if you didn't care to select what properties of the store should be provided to a component? Am I missing anything, or should this work?

wondering, when an event reaches an updated state, will the Components use it without using that state?

example:
Provider have state { store1, store2 }
Component1 get store1 from Provider
Component2 get store2 from Provider
...when setState store1, Component2 will also be reactivated too?

I see that connect seems to be a thin wrapper around Consumer. I'm wondering if there's some guidance about when to use what?

I guessed you changed the name from react-stateful at some point, but forgot to update the screenshots. It had me stumped for a few minutes.

It's quite convenient to create the store at app startup time, but sometimes the initialState is not known at store creation time, but only when we mount the provider. In such case I'd like to create the store with no initialState = null, and only when provider is mounted, provide it with an initialState.

There are workarounds possible, like creating the store inside a React component, but it seems less convenient.

Hi @didierfranc, looks like something went wrong during the latest release as of 21cbd0d dist/react-waterfall.js is empty.

After having done a test of react-waterfall on a small project I would like to share some opinions with you. I have detected a number of problems/inconveniences that with other libraries like redux is solved.

• Regarding maintainability I do not see a good way to divide the functions of the actionCreators according to functional blocks without there being the probability of collision between the function names. My idea would be to be able to have namespaces by functional blocks.

actionCreators: {
    orders: {...},
    profile: {...}
    ...
}

In this way I could organize the actions in independent files without worrying about the collision of names between functions of different action.

• An action can alter the store on more than one occasion. It is common that when we have asynchronous calls we want to be able to notify the state view (LOADING, SUCCESS, ERROR). I do not see an easy way to do this with the current implementation. see other comments

These shortcomings, in my opinion, are insurmountable at the moment and it makes me think about changing the implementation to redux for the moment.

Thank you

It's been a while since I touched an "isomorphic" react app, and i'm not working on one now, but is it possible to use this library for that? Seems like the store is a global singleton. https://discuss.reactjs.org/t/facebook-flux-singleton-store-and-server-side-rendering/5652

I copied sources of react-stateful-example and ran yarn install && yarn start, but caused Element type is invalid error.

When i commented out <Provider> like that, did not occur Exeption.

render () {
    render.root++
    return (
         <div>
        {/*<Provider>*/}
        {/*<div>{this.state.date}</div>*/}
        <h1>Connected components</h1>
        {/*<div className="flex examples">*/}
        {/*<Count/>*/}
        {/*<User/>*/}
        {/*</div>*/}
        {/*<h1>Rendering</h1>*/}
        {/*<p>*/}
        {/*App <i>{render.root}</i>*/}
        {/*</p>*/}
        {/*<p>*/}
        {/*Count <i>{render.count}</i>*/}
        {/*</p>*/}
        {/*<p>*/}
        {/*User <i>{render.user}</i>*/}
        {/*</p>*/}
        {/*</Provider>*/}
      </div>
    )
  }

Error log

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
▶ 26 stack frames were collapsed.
./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
▶ 6 stack frames were collapsed.

There seems to be some issues when trying to use connected components as router components. Can you please help me with this issue?

Here's what I try to do (simplified version):

Error:

warning.js?1b0b:33 Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.
    in Route (created by ROUTER)
    in ROUTER (created by App)
    in App (created by HotExportedApp)
    in AppContainer (created by HotExportedApp)
    in HotExportedApp (created by BookingEngineAppProvider)
    in n (created by ContextProvider)
    in ContextProvider (created by BookingEngineAppProvider)
    in ApolloProvider (created by BookingEngineAppProvider)
    in AppContainer (created by BookingEngineAppProvider)
    in BookingEngineAppProvider

// Some page component
class MainPage extends Component {
  render() {
    return (
      <div className="MainPage">
        Main page 2
      </div>
    );
  }
}

export default connect(state => ({
  texts: state.texts || {},
}))(MainPage);


// App component with router
class App extends Component {
  render() {
    return (
	<Router>
	  <Route path="/" exact={exact} component={MainPage} />;
	</Router>
	);
  }
}

There seems to be a bug when calling two actions consecutively. The second action (even if they both are synchronous) receives an outdated version of the state (as if the first action never executed).

Bug reproduced here: When you press the button two actions are executed: add and double. double receives the state prior to the execution of add.

Works correctly if you either await the first call or you defer the second action call forward in the event loop (e.g. setImmediate).

Hi,

I forked react-waterfall-example and started implementing an integration with redux-devtools-extension.
It works very well for viewing, I havn't got the yet to go over the time travel, so I combined your devTool with mine.

Have a see:
https://github.com/elisherer/react-waterfall-example/blob/feature/redux-devtools-extension/src/reduxDevTool.js

It seems that if I connect a component to a store, it stops being able to access this.props.children.

If I have

class Test extends React.PureComponent {
    render() {
        return <View style={{ flex: 1 }}>{this.props.children}</View>;
    }
}

then rendering <Test><Text>111</Text><Text>222</Text></Test> works perfectly well.

However, if I instead connect my component to the store with:

const ConnectedTest = connect(state => state))(Test);

then when I render <ConnectedTest><Text>111</Text><Text>222</Text></ConnectedTest>

the children do not appear. I'm using react-waterfall 3.0.7.

What am I doing wrong?

This shows when i used connect in my component

export default connect(["customers"])(Customers);

Do this has any middleware possibilities or will it have it in the future? Would be handy for realising a persistent store for example.

Hi, I was looking into a way to use reselect with waterfall and noticed that the example from v3 was removed. Was there a reason?

It would be great to have a type definition file for the project!

With create-react-app

"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-scripts": "1.1.4",
"react-waterfall": "^4.0.0-beta.1",

I'm getting the following output.

Failed to compile.

./node_modules/react-waterfall/dist/react-waterfall.js
Module build failed: Error: ENOENT: no such file or directory, open '/Users/michael/Code/impulse/admin-interface-service/site/node_modules/react-waterfall/dist/react-waterfall.js'

I'm using it like this

import createStore from 'react-waterfall'
import * as Api from './Api'

const initialState = {
  user: null,
  sales: null,
}

const actionsCreators = {
  getUser: async () => {
    const user = await Api.getUser()
    return user
  },
}

const config = {
  initialState,
  actionsCreators,
}

const store = createStore(config)


export const {
  Provider,
  connect,
  actions,
} = store

I previously had a release version installed, but have since blown away all lock and node_module folders to re-install. Any ideas? Thanks.

@Contributors

@elisherer @hansoksendahl @VanthiyaThevan @klassicd @FlorianRappl @jgbright @mottox2 @emilioicai @callumlocke @chrismcleod

I've started to rewrite react-waterfall from scratch here https://github.com/didierfranc/react-waterfall/tree/master, in order to make the code cleaner, splited and with a better flow type coverage to facilitate contributions and comprehension.

Some questions

1. Is <Consumer /> really useful ? I'm not using it in my projects, I prefer connect, should we keep it ?
2. We used to access actions from two way: store.actions or directly from the consumer/connect props/arguments. In the current v4 draft you can only connect the state, and actions are available through store.actions only.

I believe if we make API even simpler, with only one way to do something it could be better.

Just launched this site and am using Waterfall (v4.0.0-beta.2). I love how much less boilerplate there is coming from Redux and how easy actions are to use. The async actions in v4 were the main reason for switching. Never looking back!

https://addic.tech

I need todo list example

any idea on how tests could be written, especially with Jest?

Hi I passed the example code to react native and works wonderful but redux-devtools doesn't work.

On the documentation you said During development redux-devtools are automatically enabled. Install the extension. what's mean automatically enabled? maybe I missed something...

Here is my code:

store.js

import createStore from 'react-waterfall'

const config = {
  initialState: { count: 0 },
  actionsCreators: {
    increment: ({ count }) => ({ count: count + 1 }),
  },
}

export const { Provider, connect, actions } = createStore(config)

App.js

import React from 'react';
import {Button, Text, View} from 'react-native';
import { connect, Provider, actions } from './store'

let Count = ({ count }) => <Text style={{marginTop: 100}}>{count}</Text>
Count = connect(({ count }) => ({ count }))(Count)

export default class App extends React.PureComponent {

  render() {
    return (
      <Provider>
        <Count/>
        <Button title='add' onPress={() => actions.increment()}/>
      </Provider>
    );
  }
}

Thanks!

Hi. I'm trying out having multiple stores (multiple providers and consumers) and found that changes in outer contexts don't propagate all the way through to inner consumers.

Here's a (contrived) example to better explain what I mean.
https://codesandbox.io/s/4j6z81r094

When I change the Prevent component to not be Pure, everything works as expected.
Am I missing something?

Thanks.

So I've started using this library recently and I'm facing an issue. I have a component that is a Layout: It just contains markup and renders it's children inside:

const Layout = ({ children }) => {
  return (
    <div>
      {/* Some fancy HTML layout */ }
      <div className="main-container">{children}</div>
    </div>
  );
}

Now I want to connect my Layout component to the store, so I can get the current logged-in user stored there:

connect(({ user }) => ({ user }))(Layout);

As soon as I connect it, the application stops behaving the way you would expect it. Components inside the layout stop re-rendering when their state/props changes.

Issue reproduced here: Clicking on the button updates the internal state of the Counter component but the DOM is never updated.

I guess this happens because the state of the store is not changing and the Provider HOC is returning false from its shouldComponentUpdate.

Is this behaviour intended? How can I avoid it?

Using consumer throw this error. Any ideas why?

This file has a wrong name: watefall, without an R.

https://github.com/didierfranc/react-waterfall/blob/master/dist/react-watefall.js.flow

I would like to suggest a logo for the library!

• The base is the original react logo, (that is what this library based on)
• A waterfall like graphic from the top emerging from two hills.
• The water flows down to the bottom, creating the letter 'w' (for waterfall)

SVG source: (Authored by me, Used https://commons.wikimedia.org/wiki/File:React-icon.svg as baseline)

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M-1-1h502v502H-1z"/><g><path fill="#61a3f9" d="M495.501613 250.701613c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6l.1-.1c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v.1c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-143.7 26.8c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zm-175.8 47.8c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zm-90.6-24c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zm53.8 142.9c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6z"/><path fill="#61DAFB" d="M149.7999878 32.40000153zM349.5 32.09999847z"/><path stroke="null" d="M204.575423 50.649994h91v278.224538l-91-.122001V50.649994z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="null" fill-opacity="null" fill="#fff"/><path d="M190.122482 349.644775s50.665886 3.260676 61.702019 2.633624c11.663186.376231 75.246365-4.514783 75.120955-4.640192.12541.125409-55.682311 56.05854-55.807721 55.933131.12541.125409-21.194393-17.181255-21.194393-17.181255s-20.191108 17.306664-20.316518 17.181255M295.749275 327.901972c-.114768 4.21489-15.387853 2.985013-45.153399 4.289399-30.793576-1.015162-44.775042-1.892118-46.176586-4.328159" stroke-opacity="null" stroke-width="null" stroke="null" fill="#fff"/></g></svg>

Can we host a better documentation and demo for quick and better understanding of feature. Let me know if you need my help.

Why was it removed? Any chance to bring it back?

Routes change by but components don't render

index.js

ReactDOM.render(
  <Provider>
    <Router basename={config.baseUrl}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('root'),
);

App.jsx

// @flow
import React from 'react';
import { Switch, Route, Redirect, Link, withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import Header from './Header';
import Main from './Main';
import Footer from './Footer';
import Alert from './Common/Alert';
import { connect } from '../store';

const App = ({
  isMobile, location, buyCompletionStep,
}): React.Element<*> => {
  console.log(location);
  return (
    <div>
      <div className="wrapper">
        <div className="base">
          <div className="main_content">
            <Header />
            <HeaderWarning />
            <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/buy">Buy</Link></li>
              <li><Link to="/sell">Sell</Link></li>
              <li><Link to="/help">Help</Link></li>
              <li><Link to="/test">test</Link></li>
              <li><Link to="/done">Done</Link></li>
            </ul>
            <Switch>
              <Route
                exact
                path="/"
                component={() => (
                  <Main />
                )}
              />
              <Route
                exact
                path="sell"
                render={() => (
                  <h1>Sell</h1>
                )}
              />
              <Route
                exact
                path="help"
                render={() => (
                  <h1>Help</h1>
                )}
              />
              <Route
                exact
                path="/test"
                render={() => (
                  <h1>Test</h1>
                )}
              />
              <Redirect to="/" />
            </Switch>
            <Footer />
          </div>
        </div>
      </div>
      <Alert code={buyCompletionStep} />
    </div>
  );
};

export default compose(
  withRouter,
  connect(state => ({
    lang: state.lang,
    isMobile: state.isMobile,
    buyCompletionStep: state.buyCompletionStep,
  })),
)(App);

Result console.log(location): // {pathname: "/", search: "", hash: "", state: undefined}
and not changed by click on links but real url of browser changed

if using <Router> inside <App> all works

If I only want to use actions with a Consumer, as opposed to straight up importing actions from my store, I'm forced to add a noop mapStateToProps. Am I using the consumer in a wrong fashion or is this a viable use case? If yes I can submit a PR for that :)

I'm using react-waterfall on a project bootstrapped with create-react-app. When you generate a production build running npm run build the output is broken. When you access to the app on your browser, this error pops up on the console:

TypeError: t is not a function
    at react-waterfall.js:1
    at Array.map (<anonymous>)
    at new o (react-waterfall.js:1)
    at constructClassInstance (react-dom.production.min.js:111)
    at beginWork (react-dom.production.min.js:138)
    at a (react-dom.production.min.js:176)
    at i (react-dom.production.min.js:176)
    at O (react-dom.production.min.js:182)
    at b (react-dom.production.min.js:181)
    at y (react-dom.production.min.js:181)

I'm using version 3.0.6.

Any ideas?

What are subscribe/unsubscribe used for? These are properties returned by createStore(), but I cannot find either any examples of their usage, or some note explaining that they shouldn't be used.

I see there are flow typings, but for much more popular TypeScript typings are missing.

Hi, Thanks for this great package! So much simple. But I have this question:

At redux you can easily define type for example:

FETCH_USERS_LOADING and the payload can only return {loading: true} to show loading at front section

How do you handle this on waterfall?