anish000kumar / redux-box Goto Github PK

I'm new to all this stuff but found your (a) video on redux-box and really like the way it looks compared to all the boilerplate. I also found this project: react-boilerplate which seems great. I see lots of mention of using reselect for performance reasons, but can't say I actually understand what it is doing yet. I'm wondering if you could address the ability to use reselect for performance or if maybe redux-box addresses this in another way.

I wonder why there are screenshots in Readme instead of text? It prevents e.g. copy-pasting (not to mention other aspects like overall accesibility, i.e. screen readers, poor connection, SEO etc.)

Markdown (at least in GH and NPM flavors) has syntax coloring out-of-the-box.
You write:
```javascript
import {createSagas, createCntainer } from 'redux-box'
```

And it looks:

import {createSagas, createCntainer } from 'redux-box'

https://guides.github.com/features/mastering-markdown/

I'm using the sagas property of the config to pass in some additional sagas that are not part of a module and I'm noticing they are not registering - using this example from the docs

import { createStore } from 'redux-box'
import { call } from 'redux-saga/effects'
function* myCustomSaga() {
  console.log('my saga is registered')
}
const config = {
  sagas: [call(myCustomSaga)]
}
export default createStore(modules, config)

I'm not seeing myCustomSaga register.

I think this is because of this line:

config.sagas && config.sagas.forEach(saga => sagas.concat(saga));

which needs to be:

sagas = config.sagas ? sagas.concat(config.sagas) : sagas;

i.e. it looks as though the concatenated saga array is getting lost in a black hole within the forEach loop

I've tested this and it works - I will make a PR presently

Hi,

After using this lines I got the error :

import store from "../store/index" // points to store/index.js file

const accessToken = store.getState().auth.accessToken;

console.log('accessToken', accessToken)

Possible to be a bug or my code mistaken ?

Thanks

Thanks for this useful package and all the examples.

I couldn't find any example with a test. Specifically, I am interested in testing sagas. It seems the approach proposed in redux-saga (https://redux-saga.js.org/docs/advanced/Testing.html) is not applicable here or at least is not very straight forward. Appreciate if you provide a test case for sagas.

Thanks

I was hoping to use this for an app I'm working on for a client. Unfortunately a necessary internal dependency includes babel-polyfill, and resulting in the following error
Error: only one instance of babel-polyfill

Babel even suggests not to use babel-polyfill for libraries for this reason.
babel/babel#3832
https://babeljs.io/docs/usage/polyfill/#details

I like the example that you give in the Readme but when you open the example in the example folder its much simpler and doesnt seem to take advantage of that beautiful syntax you show in the readme.

It would be great if you could show a more complex example, perhaps one that does an api request too, to show how you handle async actions?

Hello,

Is it possible to upgrade package to support newer react-redux versions ?
Current stable is 6.* and 7 is beta.
I need to use the newer version of https://github.com/rgommezz/react-native-offline and it needx react-redux 6.x.x to be installed.

Thanks

Pretty much how https://github.com/infinitered/reduxsauce does it.

Instead of creating a lot of functions that just return the object that represent the action that you are talking about,

You could use a function that does that for you and specially, it gives you back the action list.

take a look to reduxsaurce, I think it is worth to add something similiar or the same.

Side note,

that way you could even scope your actions based on some configuration when you create the actions, like prefix, which it is really handy when you have large applications (you do not need to hunt the entire code looking for every place that you need to rename (add the prefix) your action.

When using the newest versions of react-redux (^6.0.0) and redux (^4.0.1) instead of the versions this project uses (5.0.6 and ^3.7.2) the following exception occurs:
Either wrap the root component in a <Provider>, or explicitly pass “store” as a prop to "Connect(MyComponent)
when using this setup (simplified):

import React from 'react';
import store from './store'
import { Provider } from 'react-redux';
import MyComponent from './MyComponent';

export default const App = () => (<Provider store={store}><MyComponent></Provider>);

import React, { Component } from "react";
import { module as testModule } from "./store/testModule";
import { connectStore } from "redux-box";
class MyComponent extends React.Component {
  render() {
    return (<div>Hey</div>)
   }
}
export default connectStore({
    test: testModule
})(MyComponent) 

Hello,
I'm using box on my < 0.56 and it's configured and working well but cannot setup it with new rn/babel.
As I read rn uses new metro-react-native-babel-preset

Any hint for setting it up ?
I think I cannot setup babel dependencies, I read that stages are deprecated in new babel!!!

Reactotron uses it's own createStore which is not compatible with redux-box createStore. You can see a break down of how reactotron works here https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux.md

Also the redux-saga reactotron plugin is not compatible either it doesn't seem like. https://github.com/infinitered/reactotron/blob/master/docs/plugin-redux-saga.md

Redux Box packages things nicely into modules, where each module is nicely self-contained.

This goes as far as having Selectors that exist as part of the module, and when called are only give this modules portion of the state. This is fantastic for building up self-contained modules easily.

Unfortunately, Redux Box relies on the Redux Sagas "effects" for some feature. One such feature is the obtaining values from elsewhere in the state during a Saga - using the select effect.

This effect works exactly the same as in Redux Saga. Which means that it calls the provided selector with the entire state tree and not just the local modules portion of it. Ultimately this means that we need to have two different types of selector - some that work on the local module and some that work on the entire state tree.

It could be useful to have a variation of select that applies the selector only to the local module state, so that the selectors used can remain consistent.

This looks awesome! I really like it.

I would love to see a typescript example of this this in action because it seems like you should be able to strongly type this very nicely 😄

Hello,

I am upgrading redux-box from v1.6.2 to v2.0.0-beta.2 and then I got this error. Is there anybody encountered this error too? and how to fix? Thanks a lot!

Unable to resolve module ./helpers from node_modules/redux-box/dist/index.js

I don't see a way I could setup the initial state of the store right now.

Not sure what the purpose of test is? Is this redundant?

I'm trying to figure out how to invoke actions from sagas

Should this work ?

const state = {
	version: '1.0.0',
}

const actions = {
	setVersion: version => ({ type: 'SET_VERSION', payload: version }),
}

const mutations = {
	SET_VERSION: (state, action) => (state.name = action.payload),
}

const sagas = createSagas({
	GET_VERSION: function*(action) {
		const response = yield call(api.getVersion)
		yield put(actions.setVersion(response.version))
	},
})

But then what if I need to invoke an action from another module ?

Should I import the other module (or at least the other module's actions) ?

Any thoughts ?

P.D.: I've seen the saga example where you invoke put without the action creator ({type: ....}), but the idea of using the action creator is to have strong typing, whenever typescript becomes available.

Per the Redux FAQ entry on deep-cloning state, deep cloning is bad for performance due to the cost of copying all fields, and the new references causing unnecessary re-rendering.

If you want to provide a way for reducer functions to update state safely with normal mutative code, I'd suggest looking at the immer library instead.

I would like to get an example of how to use redux-box with an api GraphQl

Many thanks and beautiful work.

How to integrate react routerv4 web version?

like in vuex getters enable you write computed functions that return values that can be used across you app. this values are updated when state changes across your apps.

I've noticed that the Selectors are all executed immediately and the results of them are provided to the React components for rendering. This means that it's difficult to have selectors that take parameters.

What I've taken to doing, which works but feels a bit strange, is having Selectors that return functions. For example:

    selectUsers: (state) => () => selectUsers(state),
    selectUserById: (state) => (id) => selectUserById(state, id)

So the React component sees two functions, one called selectUsers with zero parameter, and one called selectUserById with a single parameter. These can then be called as needed and will return the correct values from the state, but the actual execution of them is only on-demand and they can be parameterised.

I'm not sure if such a feature would be beneficial being included as a core part of redux-box, or how, but it would be useful for me :)

Can I use this library along with redux-persist? And how?

I would love to see either an example of this with redux-observable (if possible) or have this added as a feature.

I love this syntax for modules, and think it paired with redux-observable would be really amazing.