Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 10 2018 02:41
    Naiba01 commented #1157
  • Sep 05 2018 18:37
    govarthananve commented #1080
  • Sep 05 2018 17:12
    carloquilala opened #1349
  • Aug 07 2018 11:42
    carloquilala edited #1348
  • Aug 07 2018 11:14
    carloquilala opened #1348
  • Jul 31 2018 06:46
    zaoansijia commented #1347
  • Jul 13 2018 01:45
    gapsaras commented #842
  • Jul 12 2018 10:08
    grootendorste commented #930
  • Jul 02 2018 15:06
    aozfen commented #1092
  • Jun 25 2018 17:25
    olliecaine27 closed #1268
  • Jun 03 2018 17:30
    olliecaine27 synchronize #1268
  • Jun 03 2018 17:16
    olliecaine27 synchronize #1268
  • May 22 2018 05:14
    ishan123456789 commented #1220
  • May 19 2018 08:38
    MirShi opened #1347
  • May 14 2018 19:53
    samanthi22 closed #1346
  • May 14 2018 19:53
    samanthi22 commented #1346
  • May 05 2018 17:33
    samanthi22 opened #1346
  • Apr 22 2018 09:28
    m-ketan closed #1319
  • Apr 20 2018 00:40
    matthew-dean commented #658
  • Apr 02 2018 12:36
    AndrewSavetchuk commented #1080
Tobias Lundgren
@lundgren2
Hi, I have an simple question. I’m using redux to store props with all my customers and now I only want to list all customers that have country = SE. How can I do this check in react/redux? and then list it in an <li> with .map() or something like that?
Roman Pearah
@neverfox
@lundgren2 Lots of ways you could handle that, but try setting the filter in state also (because that's what it is) and then write a selector for the customers your view sees that either returns all customers or customers filtered as appropriate.
Tobias Lundgren
@lundgren2

@neverfox thanks for your reply! I have tried to solve that by Assign the two objects like this:

export function selectCustomer(id) {
  return (dispatch) => {
    return fetch(`/api/customer/get/${id}`, {method: 'get'}).then((response) => {
      if (response.ok) {
        return response.json().then((json) => {
          dispatch(fetchCustomerAddons(id)).then((response) => {
            !response.error ? (
              response.payload.data != null ? (
               json = Object.assign(json, response.payload.data),
               dispatch({type: SELECT_CUSTOMER, customer: json})
             ) : dispatch({type: SELECT_CUSTOMER, customer: json})
           ) : ''
          })
        })
      }
    })
  };
}

Is that an good (and fast way) to do this?

This is my action function now...
Roman Pearah
@neverfox
sure
not sure what that has to do with your previous question though
Tobias Lundgren
@lundgren2
Oh, sorry! Before this two fetch were two different functions. the first were setting and prop = customer, and one other prop = customerAddons...
Now I have combined those two functions til one
Jon Earley
@jonearley
Would anyone have an example to share for setting up a fractal sub-routes?

Looking back I found this resource: davezuko/react-redux-starter-kit#797.

I'll start here.

jakehm
@jakehm
So is it true you need to do routing with plainRoute objects for lazy loading?
we are using it as component : CoreLayout
jakehm
@jakehm
@adityashankert
//CoreLayoutContainer.js
import { connect } from 'react-redux'
import { login, register, fetchUser, logout } from 'store/user'

import CoreLayout from './CoreLayout'

const mapStateToProps = state => ({
  currentUser: state.currentUser
})

const mapDispatchToProps = {
  login,
  register,
  fetchUser,
  logout
}

export default connect(mapStateToProps, mapDispatchToProps)(CoreLayout)
aditya shanker tagirisa
@adityashankert
Where should we write this ?
Sorry I'm damn new to this
jakehm
@jakehm
this is the component you add to your route
// routes/index.js
import CoreLayout from '/layouts/Corelayout/CorelayoutContainer.js
//...
export const createRoutes = (store) => ({
  path: '/',
  component: CoreLayout,
//  ...
aditya shanker tagirisa
@adityashankert
import React from 'react'
export const CoreLayout = ({ children }) => (
 <div>
     {children}
 </div>

)

InternalLayout.propTypes = {
  children : React.PropTypes.element.isRequired
}

export default CoreLayout
currently this is the corelayout code from where i will get to access the props?
joshuaandrewhoffman
@joshuaandrewhoffman

Can anyone weigh in on a best practices question? I'm refactoring towards better componentization (I jammed tons into one component/module/container pair). So far so good, with the exception of what I should do with my action handlers/reducer code.

Should these all live in my high level component for this route? Should I break them down to the component level where they're generated? (I don't think I can just repeat the injectReducer pattern in my index.js because I'd overwrite the key)

I'm looking more for theory on a smart way to architect this vs technical help on how to do it, but I'm still learning so I may be naive to technical limitations. Happy to give specifics on the project if it'll help, but I don't wanna spam irrelevant detail if not. I have a few more thoughts as to options here but I don't want to make this into a giant wall of text /shrug

jakehm
@jakehm
@joshuaandrewhoffman You can either put new actions in the store folder or in the module folder of a specific route, like routes/counter/modules
If the actions were only being used by a single route, I would put them in a modules folder.
jakehm
@jakehm
and you can inject as many reducers as you want. Just change the key.
joshuaandrewhoffman
@joshuaandrewhoffman
@jakehm so there's no actual dependency created between the store name and the reducer name? In the examples they're the same so I assumed some plumbing/magic was happening somewhere I hadn't found yet. As I'm typing it though that magic sounds inconsistent with my understanding of how reducers work in redux 😅 so I think maybe I get why the key change would work.
Thanks a ton for the input on this! I'm glad I decided to do this refactor, I'm learning a lot of stuff I missed or didn't fully grok
Nilay Kothari
@kotharinilay
hey all,
I am new to redux, just wanted to ask what data should store in redux store?
Is it good to store form data in redux store?
How often should I connect to store to update data (i.e. is it fine to update store data on text field change event?), which don't affect performance?
help me to get it started..
jakehm
@jakehm
@kotharinilay it does affect performance but you can do it. If you don't need to update the state every time the user types a new letter, I would use refs to only update state on submit
jakehm
@jakehm
If you are asking about putting the value in the store vs state, I think the performance is the same.
jakehm
@jakehm
When I save changes to components, there's no reload, but when I make changes to stuff that isn't as deep, like routes, reload does work. Anyone know what's going on?
jakehm
@jakehm
i did yarn clean, which is the script for rifram and it kind of broke everything
jakehm
@jakehm
also are there any plans to move to rr 4 soon? I think I need it for my hmr to work.
bytewiz
@bytewiz
@kotharinilay both your questions very much depend on what you are trying to do. Do you have some use case or example?
Sanjin Šarić
@sanjin-saric

Hi guys. I would like to import a stylesheet that would be local and NOT loaded from cdn, how do I do that?

For example how would I add bootstrap.sass (from node modules) to be loaded locally.

Terry Raimondo
@terry90
Hey, is there something simpler than Counter/index.js to declare the component ? Why is it important to do it async ? I'm kinda new to React and Redux so I do not want to add more noise to my brain, already much things to learn. The thing is I don't understand require.ensure([], (require) => :heart:
mrweissx
@mrweissx_twitter
@terry90 this is to support webpack code splitting (https://webpack.github.io/docs/code-splitting.html)
@terry90 so instead of your entire app existing in 1 large .js file, you can split separate routes into separate files that are loaded on demand
Félix Bayart
@yukulelix
Hi guys ! I wanted your advices on what would be the best strategy to implement a first async fetch when loading a new route.
As the components should remain purely functional, I guess adding a componentDidMount isn't the right way to go ??
VisionCptn
@VisionCptn
Hello guys, sry foe noobie question, but is this starter kit isomorphic.
Roman Pearah
@neverfox
@yukulelix You might consider responding to a LOCATION_CHANGE action using react-router-redux and redux-saga.
VisionCptn
@VisionCptn
can smb tell me what is path from index.html to npm folder.
Zenthon
@huangzhuolin
I was confused that why use [COUNTER_INCREMENT] instead of COUNTER_INCREMENT in the boiler code. Who can give me some tips?
// ------------------------------------
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
  [COUNTER_INCREMENT]    : (state, action) => state + action.payload,
  [COUNTER_DOUBLE_ASYNC] : (state, action) => state * 2
}
Preston Manning Bernstein
@prestonbernstein
Hey everyone
I would like to submit a pull request to this projecty
A simple update to the README to clarify the current Developer Tools implementation
How could I go about getting authorization to contribute to this repo? Thanks so much
Ernesto Palafox
@palafoxernesto
Hi everybody!
I'm almost new in the react-redux world, i found this starter and it seems perfect to me to start a project.
Right now I am wondering how should i handle JWT authentication. Can anyone give some advice? Thank you
Preston Manning Bernstein
@prestonbernstein

Hey everyone,

I went ahead and updated the tutorial for the current version of react-redux-starter-kit. You can check it out here

Ernesto Palafox
@palafoxernesto
Didn't know about this tutorial, thank you @prestonbernstein its very useful!
Preston Manning Bernstein
@prestonbernstein
Thanks @palafoxernesto . I have to give a shout out to Markus, who wrote the first iteration of this article. I hope that it helps you out in your coding!