如何在redux中获取ajax请求?

时间:2015-11-25 00:19:26

标签: ajax reactjs request redux

我愚蠢,我仍然无法在redux中获得ajax请求。我不明白,我应该在哪里获得getState。在组件中,我使用连接动作和减速器的连接。然后我使用componentDidMount调用组件中的动作。如何从服务器的redux中获取ajax请求?帮助我理解这种疾病。我试着理解redux的例子,但它没有效果。如果我启动服务器,请收到警告:getDefaultProps仅用于经典的React.createClass定义。请改用名为defaultProps的静态属性。 的操作



import $ from 'jquery';
export const GET_BOOK_SUCCESS = 'GET_BOOK_SUCCESS';

export default function getBook() {
  return (dispatch, getState) => {
    $.ajax({
      method: "GET",
      url: "/api/data",
      dataType: "application/json"
    }).success(function(result){
      return dispatch({type: GET_BOOK_SUCCESS, result});
    });
  };
}




减速



import {GET_BOOK_SUCCESS} from '../actions/books';

const booksReducer = (state = {}, action) => {
  console.log(action.type)
  switch (action.type) {
    case GET_BOOK_SUCCESS:
      return Object.assign({}, state, {
        books: action.result.books,
        authors: action.result.authors
      });
    default:
      return state;
  }
};

export default booksReducer;




组件



    function mapStateToProps(state) {
      console.log(state)
      return {
        books: state.books,
      };
    }

    function mapDispatchToProps(dispatch) {
      return  bindActionCreators({getBooks: () => getBook(),}, dispatch);
    }

    @Radium
    @connect(mapStateToProps, mapDispatchToProps)
    class booksPage extends Component {
      static propTypes = {
        getBooks: PropTypes.func.isRequired,
      };

      componentDidMount() {
        const { getBooks } = this.props;
        getBooks();
      }

      render() {
        const {books} = this.props;




index.js



    const store = configureStore({}, routes);

    ReactDOM.render((
      <div>
        <Provider store={ store }>
          <ReduxRouter />
        </Provider>
        <DebugPanel top right bottom>
          <DevTools
            store={ store }
            monitor={ LogMonitor }
            visibleOnLoad />
        </DebugPanel>
      </div>),
      document.getElementById('root')
    );
&#13;
&#13;
&#13;

configureStore

&#13;
&#13;
function configureStore(initialState, routes) {
  const store = compose(
    applyMiddleware(
      promiseMiddleware,
      thunk,
      logger
    ),
    reduxReactRouter({ routes, history }),
    devTools()
  )(createStore)(rootReducer, initialState);

  if (module.hot) {
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers');
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

export default configureStore
&#13;
&#13;
&#13;

0 个答案:

没有答案