React-Flux 加载初始状态答案

【问题标题】：React-Flux Load initial stateReact-Flux 加载初始状态
【发布时间】：2017-01-25 12:13:27
【问题描述】：

我正在尝试使用 axios 在 al React Flux 应用程序中发出 Ajax 请求，并在设置状态后获取数据。

我在根应用中有这段代码：

InitialData.getInitialPosts();

API 请求如下所示：

let PostsApi = {
    getAllPosts(){
        return axios.get('https://jsonplaceholder.typicode.com/posts')
            .then( (response) => {
                console.log('All posts: ', response.data)
                return response.data;
        });
    }
}

export default PostsApi;

在 actions/initialData.js 我有这个：

let LoadInitialData = {
    getInitialPosts(){
        Dispatcher.dispatch({
            actionType: 'LOAD_INITIAL_POSTS',
            initialPosts: {
                posts: PostsApi.getAllPosts()
            }
        })
    }
}

export default LoadInitialData;

店内：

let _posts = [];
const PostsStore = Object.assign({}, EventEmitter.prototype, {

    addChangeListener(callback){
        this.on('change', callback)
    },

    removeChangeListener(callback){
        this.removeChangeListener('change', callback)
    },

    emitChange(callback){
        this.emit('change', callback)
    },

    getAllPosts(){
        return _posts;
    }
});

Dispatcher.register(function(action){

    switch(action.actionType){
        case 'LOAD_INITIAL_POSTS':
            _posts = action.initialPosts.posts;
            PostsStore.emitChange();
            break;

        default:
    }

});

在视图中：

export default class PostsPage extends React.Component {

    constructor(){
        super();

        this.state = {
            posts: []
        }
    }

    componentDidMount(){
        this.setState({
            posts: PostsStore.getAllPosts()
        });
    }

    render(){        
        const { posts } = this.state;
        return(
            <div>
                {posts.map( post => {
                    return <h3 key={post.id}>{post.title}</h3>
                })}
            </div>
        )
    }
}

在 console.log 上：

状态：对象 {posts: Array[0]}

状态：对象{帖子：承诺}

postsApi.js:7 所有帖子：[对象，对象，对象，对象，对象，对象...]

问题是ajax请求在componentDidMount之后。

【问题讨论】：

这里没有足够的信息。你想要发生什么？反而发生了什么？显示失败点的相关代码在哪里？
我给你更多的信息，谢谢。

标签： javascript reactjs flux axios

【解决方案1】：

您的PostsPage 组件未正确设置以侦听来自商店的更改。您拥有的代码只会在首次挂载时获取帖子列表一次。您希望它在商店获得新数据时更新。

为此，您需要利用您在商店中设置的添加/删除更改侦听器功能。它应该看起来像这样；

export default class PostsPage extends React.Component {

    constructor(){
        super();

        this.state = {
            posts: []
        }
    }

    _calculateState(){
        this.setState({
            posts: PostsStore.getAllPosts()
        });
    }

    componentDidMount(){
        PostsStore.addChangeListener(this._calculateState);
    },

    componentWillUnmount(){
        PostsStore.removeChangeListener(this._calculateState);
    },

    render(){        
        const { posts } = this.state.posts;
        return(
            <div>
                {posts.map( post => {
                    return <h3 key={post.id}>{post.title}</h3>
                })}
            </div>
        )
    }
}

【讨论】：