We’re rewarding the question askers & reputations are being recalculated! Read more.

# Tag Info

## Hot answers tagged redux

5

Well, you could use Array.filter to filter the launches. ... case 'filterLaunches': return Object.assign({}, state, { filteredLaunches: state.launches.filter(function(launch) { return action.location === launch.location.countryCode }) } default: return state; The other question is, why not filtering inside the Component directly? ...

5

I'm not exactly sure of your environment (I'm going to assume you're using Node), and with this assumption, I want to address a few things starting with specific things, then more general: Specific You shouldn't be keeping inputText in the global store. This creates lots of store dispatches and updates which are completely unnecessary and costly. Instead, ...

4

I see some Redux conventions misconceptions: The reducer purpose is to change the state, I see that you also copy state to localStorage. You should use actionCreators to save data in localStorage. In actionCreator, you save data and then - dispatch action to reducer. Any of the React components with Redux don't need to have state. You should pass all ...

3

I'm especially interested in any feedback on my initialization procedures: ... Is that reasonable? As long as your code is dealing with configuration only, it looks good to me overall. (I assume, you don't have a login screen.) Otherwise, you may want to look at real life authentication example with Auth0. I'm not pointing to technology here, but rather how ...

3

First of all, Flux is not to be confused with Redux. While both have similarities, the main difference is that Flux allows multiple stores while Redux advises only using one store per app for simplicity. The following will talk about Redux. /* * dispatch is a core function, directing every action * to the proper reducer depending on the type */ const ...

3

Mutation is generally discouraged in Redux (and React in general) because it breaks tooling/libraries that expect x === y to mean that x and y are the same throughout time. If you use the React.useEffect or React.useMemo or React.useCallback dependency arguments, or React.memo, you'll run into problems if you mutate objects that you're passing. We can ...

2

Preface: I haven't worked in the Android ecosystem, so this review is mostly looking at the Kotlin side of things. I've also had minimal exposure to the Redux pattern. Some low hanging fruit that IntelliJ IDEA points out: return state is unreachable code in fun reducer. Control flow will always exit as action can only be .INCREMENT or .DECREMENT. I would ...

2

There's a few things you can do and different approaches depending on your personal preference. You could: Extract the cases to pure functions Extracting the logic to methods could help with readability and ease testing. const addPicture = (state, action) => [ { id: action.id, picture: action.picture, votes: 0, }, ...state, ] const ...

2

About the HTML As pagination is some form of navigation (i.e., links), you should use a elements instead of button elements. This also allows you to use the sequential link types next and prev. <a href="/foo" rel="prev">Previous</a> <a href="/bar" rel="next">Next</a>

2

I agree with James that #3 is better because of the separation aspect. I admit that I am a novice as far as React goes, having typically worked with other frameworks like jQuery, PrototypeJS, AngularJS, VueJS. The perspective below might not really meld well with traditional React techniques, but Event delegation really helps separate the event logic (JS) ...

2

Think your worrying yourself about small details here, any advantages of one over the other would be minor at best. I think out of all 3, the last solution would be my preferred one. It's clean from a code separation POV and does exactly what it says on the tin, also easier to change behaviour without affecting the other should that ever need to happen. ...

2

Object.assign({}, model) is not deepcopy, it is shalow copy only, you should consider to use Immutablejs by Facebook or write your own library. action.type === 'UPDATE_PAGE' ? UPDATE_PAGE(model, action.page) : null; Can be write: action.type === 'UPDATE_PAGE' && UPDATE_PAGE(model, action.page)

2

I was wondering if when the user clicks “Save” it is better to call a function in the List component that calls “addNew” and “deleteB” and finally “editSave” to only update the state for the “editing” state property. I would avoid this. Ideally, all your logic should live either the reducer or the thunk, NOT in components. This way, your logic is in one ...

2

It appears music-metadata is the Node.js/desktop flavor of music-metadata-browser (intended for browsers). The author doesn't explain the differences between the two, but maybe the desktop variant will be faster for you. Synchronous anything is a mistake for an inherently parallel task like this. Use fs.lstat instead of the fs.lstatSync. If ...

2

Disclaimer: I´m not an expert in redux / redux-saga. This post is not directly answering your questions. Rather, it is focused on code design / architecture and what is the most useful approach for the underlying problem. For me, the main question is: Who is in charge of determining when the data is invalid? Imho, there are at least three answers to this: ...

2

Using Array.join is unrelated to usage of async and await. Also note that the time it takes to call Array.join is insignificant in comparison to the time it takes to make the two API calls. You can consider call1().then(data => call2(data)) roughly equivalent to const data = await call1(); call2(data). There's no (obvious) performance gain to be made ...

2

After looking at the implementation, this is not an implementation of global state management. The entire point of things like redux is so you can directly connect components to a global store. In your case, it looks like every instance of StateStore has its own unique data structure, which seems to imply that you are only going to use StateStore once. You ...

2

The reason why you have to search in the way you currently are is because your redux store is so deeply nested. Flatten it and it will make things a lot easier. Have all text inputs, regardless of which form or section it belongs to, in a data structure with its own unique id. The textfield doesn't need to "know" which form or section it belongs to. You ...

1

There are many ways you could implement polling but this one is valid enough for a lot of cases. You could hide your timer off in a redux action somewhere if you were so inclined. It's worth highlighting that you should clear out your timer when the Component unmounts. componentWillUnmount() { window.clearInterval(this.timer) }

1

First of all, putting all your code in the props of your JSX is making it unreadable. Extract this into a function, and have your JSX reference that instead. Next, for debugging, I would recommend using breakpoints to debug code. console.log() is fine for a quick peek, but it introduces a lot of noise in the code. Also, when you expand a logged object in ...

1

Caching and Streaming. Cache data I can not workout if you are doing this each time your app loads. If you are and it is a slow point you should consider storing the processed data in a file or IndexedDB. The index can be the file path or hash derived from the file path. Then the app should only retrieve the meta data from the cache as needed. System ...

1

preferably into one-liner with high-order-functions. Machines execute code the same way, minified or not. But a human doesn't read or understand minified code the same way as verbose JS. Write for a human, don't one-line code. Now one thing about your code. You do NOT compare booleans. if statements evaluate booleans. If your expression is already a ...

1

Mutants are not evil. I am not going to give a line by line review as I do not see this code as having any useful value. Rather is see it as dangerous as it gives a air of safety when none is present, thus much worse than the supposed monsters you wish to banash, as now you say there are none to worry about (in fact there are more). First some basics.. ...

1

Currying? Photo hosted via unsplash, taken by Monika Grabkowska Yes you used Function.bind() to fix the callback function as the first argument to the private function, and this is a good approach to avoid excess functions and reduce the number of lines. While the concept is similar, what this code uses is actually Partial Application. Read more about the ...

1

In my opinion (which also aligns with the official Redux FAQ ("Should I only connect my top component, or can I connect multiple components in my tree?"): If MerchantContainer and ReviewContainer use mostly the same state or actions, you could reduce duplication by having a common container for both of those. If MerchantContainer and ReviewContainer don't ...

1

I would try to extract some of the common functionality into reusable components as follows. The NumericButton and OperatorButton components could either receive selectNumber and selectOperator as props or the components could be connected components with the select* props coming from mapDispatchToProps. The connected component method eliminates the need to ...

1

I agree that specific questions we can answer would be helpful. That being said, a few comments: Some would disagree, but I'd separate the View/display code from the game code (model). You can build out all the mechanics of cards (GameRoom, Hand, PlayingCard, etc.) without any React code. There is a separation between these and it will keep things simpler. ...

1

The one thing that I would change is that since you are already using react-redux library, you might as well do this - let store = createStore(recipes, window.__REDUX_DEVTOOLS_EXTENSION__()) render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') ) So that you don't have to manually subscribe like ...

1

I've only started working with React/Redux myself, but here are my thoughts. In my system I am saving the form values to local component state until the form is saved. I have one onChange handler method which checks which form field it is and then will setState. This is something I also find with React/Redux - a lot of boilerplate and repetition to update ...

Only top voted, non community-wiki answers of a minimum length are eligible