Question

我是React / Redux的新手，不确定我是不是做错了什么。

我有一个组件在componentDidMount上进行AJAX调用，以从服务器获取数据进行渲染。

问题是Redux正在调度两个@INIT个动作，并且在我已经收到服务器的响应后，通常会调度第二个动作。它带有一个空的（初始）状态，传递给组件道具，结果，我收到一个空白屏幕。

请参阅reducer生成的这个日志：

我已经发现有两个@@INIT动作是预期的行为，第一个需要测试减速器，第二个是实际的init（检查讨论here）。

问题是如何以正确的方式解决这个问题。这是竞争条件还是我做错了什么？谢谢！

更新有趣的是它肯定与我的笔记本电脑的性能有关。服务器也在我的本地环境中运行。为了让我在等待答案的同时继续进行开发，我暂时将setTimeout延迟100毫秒componentDidMount。现在我评论它并且不能重复这个问题。

更新添加我的代码片段

存储

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';

import reducers from './reducers';

const middleware = window.devToolsExtension
    ? compose(
        applyMiddleware(thunk),
        window.devToolsExtension()
    )
    : applyMiddleware(thunk);

const store = createStore(reducers, middleware);

export default store;

Reducer（没什么特别的，只是用它来记录操作，因为浏览器Redux扩展只显示了一个@@INIT动作）

import * as types from '../actions/types';

const initialState = {
    listings: []
};

export default function(state = initialState, action) {
    console.log(action, state);
    switch (action.type) {
        case types.LISTINGS_FOUND:
            return { listings: action.payload };

        default: return state;
    }
};

组件

import React from 'react';
import { connect } from 'react-redux';

import { search as searchListings } from '../../actions/listing-actions'
import View from './View'

class Container extends React.Component {
    componentDidMount() {
        if (this.props.listings.length === 0) {
            this.props.searchListings();
        }
    }

    render() {
        console.log('rendering list', this.props.listings);
        return (
            <View listings={this.props.listings}/>
        );
    }
}

Container.propTypes = {
    listings: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
    searchListings: React.PropTypes.func.isRequired,
};

const mapStateToProps = function(store) {
    return {
        listings: store.listingSearch.listings
    };
};

export default connect(mapStateToProps, { searchListings })(Container);

正如我所说，我现在无法重复这个问题。我会尝试做一些合成的例子，以便在我有更多时间后再重复这个。

Answer 1

您应该按照docu中的建议加载componentDidMount（）。您还可以在Redux的创建者身上看到此example。

第二个Redux @@ INIT操作清除已使用其他操作修改的商店状态

1 个答案: