我不确定为什么redux不认识thunk

时间:2017-10-18 01:53:59

标签: javascript reactjs redux-thunk

我无法弄清楚发生了什么。我总是像往常一样使用redux-thunk设置。由于某些原因,我无法弄清楚我得到错误:错误:操作必须是普通对象。使用自定义中间件进行异步操作。任何人都可以帮我解决这个错误吗?

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import './index.css';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

CreateStore.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers   from './reducers';

export default function configureStore(initialState) {
    return createStore(
    reducers, 
    initialState,
    applyMiddleware(thunk)
);
} 

app.js

import React, { Component } from 'react';
import Routes             from './Routes';
import {Provider} from 'react-redux';
import configureStore from './configureStore';

const store = configureStore();

 class App extends Component {
  render(){
     return (
          <Provider store={store}>
             <Routes/> 
          </Provider>
     );
  }
} 
export default App; 

Today.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { autoLocate } from '../actions';
import { Button } from './Common'

class Today extends Component {

componentDidMount() {



  this.props.fetchTodayWeather('http://
   api.wunderground.com/api/cc9e7fcca25e2
   ded/geolookup/q/autoip.json');

                    }
  render() {

     return (
     <div> 
         <div style={styles.Layout}>
           <div><Button> HAHAH </Button></div>
           <div><Button> Weather Now </Button></div>
        </div>
     </div> 
    );
  }
}


    const mapStateToProps = state => {
      const loading = state.locate.loading; 
      const located = state.locate.autolocation;         

      return{ loading, located };
    };

    const mapDispatchToProps = (dispatch) => {
       return {
              fetchTodayWeather:(Url) => dispatch(autoLocate(Url))
      };
    };

export default connect(mapStateToProps,mapDispatchToProps)(Today);`

autoLocate.js

import { AUTODATA,
        AUTOLOCATING
 } from './types';


export const autoLocate = (url) => {
  return (dispatch) => {
    dispatch({ type: AUTOLOCATING });

     fetch(url)
      .then(data => fetchSuccess(dispatch, data))
  };
 };

 const fetchSuccess = (dispatch, data) => {
   dispatch({
    type: AUTODATA,
    payload: data
  });
};

0 个答案:

没有答案