redux-thunk

问题 I am building a React/Redux app using the redux-thunk middleware to create and handle Ajax requests. I have a particular thunk that is fired pretty often, and I would like to cancel any previously started Ajax requests before firing a new one. Is this possible? 回答1: One approach would be to mark those requests as canceled by giving them random id and checking its status before handling the result. The way to do this is to assign random id for this call in your first dispatch (inside the thunk

问题 I am writing a custom middleware that needs to dispatch thunk actions. The problem is that the middleware is called after redux-thunk in the middleware chain, so I get the error Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. when using the provided dispatch . export default function createMiddleware() { return ({dispatch, getState}) => next => (action) => { if(action.type !== 'FOO') { return next(action); } dispatch(thunkActionHere); // this is the

问题 In my child component I am defining MapDispatchToProps, pass them into connect and accordingly define an interface PropsFromDispatch that is extended in React.Component Props Interface. Now in my parent component Typescript is telling me that it is missing the properties that I defined in PropsFromDispatch. This doesn't seem entirely absurd, as I am defining them as part of the React.Component Props interface, however I would expect 'connect' to take care of this the same way that it is

问题 I want to turn all 'default text' in newArray to 'new text'. Then dispatch the array with 'new text'. The problem is dispatch function is dispatching the 'default text'. Look like it does not wait for promise. What's wrong with my promise setup in the code below? return dispatch => { let newarray =[ { post:[ {message:'default text'}, {message:'default text'}] } ] let quests = newarray.map( (i) => { return i.post.map( (item) => { return axios.get(someLink).then( result =>{ item.message = 'new

问题 Below are my action and reducer files - In my component state I am only seeing this.props.mainData - but others subdataOneData etc., are not being loaded in to the state - till reducer i see the right actions are being dispatched and I also see the data for sub - calls - but they are not reaching my component - I have mapStatetoprops - where I am doing New issue: as per the updated code - when i print out payload in reducer - I see maindata with the api data but SubData [{}, {}, {}] ..?

问题 I'm new to react and I'm trying to understand on to make async ajax request. I was able to get the request completed and the data returned added to my state, but I can't render the data to my component. Here's my setup. UserPage component import React, { Component } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { getUsers } from '../../actions'; class User extends Component { displayName: 'User'; componentWillMount() { this.props

问题 I'm trying to make a small project using react & redux . The Main page for this project is the login . I already have a working api for login. Below is the code snippets from my project: login.js onLoginFormSubmit(event) { event.preventDefault(); this.props.actions.login(this.state.username, this.state.password); } render() { return ( ...Login Form ... ); } } Login.propTypes = { actions: PropTypes.object.isRequired, }; function mapStateToProps(state, ownProps) { return { loginResponse: state

问题 I have a data grid that allows multiple selection and deletion feature. I have a delete endpoint from my api; DELETE http://localhost:8888/api/audit/id And this is the action creator; export function deleteAudit(audits, callback) { let count = 0; console.log("selected audits", audits); const deleteItem = (auditId) => { console.log("deleting..", auditId); const endpoint = `http://localhost:8888/api/audit/${auditId}`; const req = Axios.delete(endpoint, callback); return (dispatch) => { req.then

问题 I am using react navigation and have added a button on the right to signout from my app using default navigation options as shown below : const otherApp = createStackNavigator({ Welcome : { screen : WelcomeScreen } }, { defaultNavigationOptions : ({navigation}) => ({ title : 'Welcome', headerStyle: { backgroundColor: '#29434e', shadowColor: 'transparent', elevation: 0 }, headerRight: ( <TouchableOpacity style={{ backgroundColor: '#DDDDDD', padding: 5 }} onPress={() => navigation.getParam(

问题 As Redux provides store for keeping all application data in one place, Is it good practice to keep data in single large object ? What if we have thousands of records and their data which is large in size, will it affect on application performance? 回答1: This is a good place to start Redux Performance For maximum rendering performance in a React application, state should be stored in a normalized shape , many individual components should be connected to the store instead of just a few, and