react-redux

How does middleware execute async actions?

 ̄綄美尐妖づ 提交于 2020-01-05 07:12:43
问题 I am having a little difficulty understanding how Redux-Thunk (or other middleware) execute async actions. From below example, I can see that when onOrder is called (maybe via a click event), it will dispatch the action created by purchaseBurger . purchaseBurger in turn return a function that will dispatch an action indicating purchase started, followed by an http request. My confusion is: When does that function returned by purchaseBurger actually gets called and executed? How does it get

React-Redux-Thunk: actions does not return dispatch

笑着哭i 提交于 2020-01-05 07:05:49
问题 I am using React Native with Redux-thunk middleware. My problem is dispatch function does not return the object and does not even console. Here is my actions file: function movieSelc(movie) { return { type: types.MOVIE_SELECT, selectedMovie: movie }; } export function selectMovie(m) { console.log("this console works!") return (dispatch) => { console.log("this console never works") dispatch(movieSelc(m)); }; } This is the component(i am not including here const styles to make it a bit shorter)

Dynamic Form: TypeError: Cannot read property 'value' of undefined

谁说胖子不能爱 提交于 2020-01-05 04:23:09
问题 RESOLVED Issue was that onChange took a wrong value. public onChange = (e:any, key:any) => { this.setState({ [key]: e.target.value }); }; I seem to have trouble getting rid of an error when entering data into my form. I am using TSX React. The goal is to be able to create a form dynamically. The issue I kept running into is that the value of my inputs cannot be read. I was wondering if anyone could look at my code and maybe spot my mistake, I am pretty clueless at this point. I am using the

Enzyme/Jest React Testing - Shallow connected component with react-redux > 6

本小妞迷上赌 提交于 2020-01-05 04:18:16
问题 We use Enzyme and Jest for testing. Updated to the latest version of react-redux in our code base, and all of the connected component test cases started failing (Version 6). Using import { createMockStore } from 'redux-test-utils'; to create store Test cases that worked with older version: const wrapper = shallow(<SomeConnectedComponent />, {context: { store }}); This fails giving error Invariant Violation: Could not find "store" in the context of "Connect(SomeConnectedComponent )". Reading

React router render component on same page

此生再无相见时 提交于 2020-01-04 16:57:53
问题 im using react router on my project, when i hit the login button, it renders the content of App component, but displays them on the same page . i want to display on new page when i hit login , help me import React, { Component } from 'react'; import * as service from '../services/service'; import '../App.css' import '../index.css' import App from'../App' import { Link, Redirect, Router, Route, browserHistory,IndexRoute } from 'react-router'; // import createHistory from 'history

bindActionCreators and mapDispatchToProps - Do I need them?

本小妞迷上赌 提交于 2020-01-04 15:11:13
问题 I'm looking at a React-Redux app and try to understand how everything is working. Inside one of the components, I saw these lines of code: import { bindActionCreators } from "redux"; ... function mapDispatchToProps(dispatch) { return bindActionCreators({ fetchPhotos }, dispatch); } export default connect( null, mapDispatchToProps )(SearchBar); If I change the above code to the following, everything still works, without any errors: function mapStateToProps(photos) { return { photos }; } export

Unable to use ref to call the child method on a connect redux component

被刻印的时光 ゝ 提交于 2020-01-04 09:26:13
问题 I want to call SingleCard child component methods in renderHiddenItem . I have assigned different ref name for each renderItem . But when I call this.name , it is undefined . Anything is wrong in this code? How can I achieve this? <SwipeListView data={this.state.listViewData} renderItem={(data, i) => { const name = 'childRef'+i return ( <SingleCard ref={component => this.name = component} itm={data.item} /> ); }} renderHiddenItem={(data, i) => { const name = 'childRef'+i return (

How to pass props to react component through routing using react-router?

心不动则不痛 提交于 2020-01-04 06:21:09
问题 I want to pass some props to component on IndexRoute. Below is my code snippet: render(root: Element) { const { store, params } = this as any; ReactDOM.render( <Provider {...{ store }} > <Router history={browserHistory}> <Route path={window.location.pathname} component={App}> <IndexRoute component={Step1} /> <Route path="step1" component={() => (<Step1 params={params} />)} /> <Route path="step1" component={() => (<Step2 params={params} />)} /> </Route> </Router> </Provider> , root); } //App

Redux with React - right way to share the store with components

感情迁移 提交于 2020-01-04 06:08:45
问题 The store service from Redux is what ultimately utilized by various components in a React App. The methods (such as dispatch, getState and subscribe) exposed by it are used by all kinds components (like container or presentational). I think the approach to pass this store service around is an important design decision. I see two approaches and they are: 1) By passing the store as a prop to every component at all nested levels. This is not the recommended one. 2) Use a tool like react-redux,

Redux with React - right way to share the store with components

匆匆过客 提交于 2020-01-04 06:08:10
问题 The store service from Redux is what ultimately utilized by various components in a React App. The methods (such as dispatch, getState and subscribe) exposed by it are used by all kinds components (like container or presentational). I think the approach to pass this store service around is an important design decision. I see two approaches and they are: 1) By passing the store as a prop to every component at all nested levels. This is not the recommended one. 2) Use a tool like react-redux,