使用redux为什么无法获取到posts这个值

Question

如何修改下面的函数，才能获取到值？

AsyncApp.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import {
    fetchPostsIfNeeded
} from '../actions'
import Posts from '../components/Posts'

class AsyncApp extends Component {
    constructor(props) {
        super(props)
        this.handleChange = this.handleChange.bind(this)
    }

    componentDidMount() {

        var o1 = { a: 1, b: 2 };
        var o2 = { b: 5 };

        var obj = Object.assign({}, o1, o2);
        console.log('obj =', obj);

    }

    componentDidUpdate(prevProps) {
        const { dispatch, selectedSubreddit } = this.props
        console.log('selectedSubredditUpdate =', selectedSubreddit)
    }

    handleChange(nextSubreddit) {
        console.log('nextSubreddit =', nextSubreddit)
        this.props.dispatch(fetchPostsIfNeeded(nextSubreddit))
    }


    render() {
        const { selectedSubreddit, posts, isFetching, lastUpdated } = this.props

        console.log('posts =', posts)
        console.log('selectedSubreddit =', selectedSubreddit)
        return (
            <div>

                <button
                    onClick={() => this.handleChange('identify')}
                >
                    点击
                </button>

                {posts.length > 0 &&
                <div style={{ opacity: isFetching ? 0.5 : 1 }}>
                    <Posts posts={posts} />
                </div>}

            </div>
        )
    }
}

AsyncApp.propTypes = {
    selectedSubreddit: PropTypes.string.isRequired,
    posts: PropTypes.array.isRequired,
    isFetching: PropTypes.bool.isRequired,
    lastUpdated: PropTypes.number,
    dispatch: PropTypes.func.isRequired
}

function mapStateToProps(state) {
    const { selectedSubreddit, postsBySubreddit } = state
    const {
        isFetching,
        lastUpdated,
        items: posts
    } = postsBySubreddit[selectedSubreddit] || {
        isFetching: true,
        items: []
    }

    return {
        selectedSubreddit,
        posts,
        isFetching,
        lastUpdated
    }
}

export default connect(mapStateToProps)(AsyncApp)

actions.js

import fetch from 'cross-fetch'

// 是为了后面在 reducer中可以匹配到对应到 type
export const REQUEST_POSTS = 'REQUEST_POSTS'
export const RECEIVE_POSTS = 'RECEIVE_POSTS'

/*
 * action 创建函数
 */


// 暴露出这个方法，其他地方可以调用这个方法去触发这个 action
// 接收到添加的请求，去找 reducers 实现
export function fetchPostsIfNeeded(subreddit) {
    return (dispatch, getState) => {
        if (shouldFetchPosts(getState(), subreddit)) {
            return dispatch(fetchPosts(subreddit))
        }
    }
}

function shouldFetchPosts(state, subreddit) {
    const posts = state.postsBySubreddit[subreddit]
    if (!posts) {
        return true
    } else if (posts.isFetching) {
        return false
    } else {
        return posts.didInvalidate
    }
}

function fetchPosts(subreddit) {
    return dispatch => {
        dispatch(requestPosts(subreddit))
        return fetch(`http://tianjinshuxie.net/page/tasks.php?query=tasks&uid=100`)
            .then(
                response => response.json()
            )
            .then(
                json => {
                    //console.log(`json =`, json)
                    dispatch(receivePosts(subreddit, json))
                }
            )
    }
}

function requestPosts(subreddit) {
    return {
        type: REQUEST_POSTS,
        subreddit
    }
}

function receivePosts(subreddit, json) {

    console.log(`json =`, json)

    return {
        type: RECEIVE_POSTS,
        subreddit,
        //posts: json.data.children.map(child => child.data),
        posts: json.map(child => child),
        receivedAt: Date.now()
    }
}

reducers.js

import { combineReducers } from 'redux'
import {
    REQUEST_POSTS,
    RECEIVE_POSTS
} from './actions'

function posts(
    state = {
        isFetching: false,
        didInvalidate: false,
        items: []
    },
    action
) {
    switch (action.type) {

        case REQUEST_POSTS:
            return Object.assign({}, state, {
                isFetching: true,
                didInvalidate: false
            })
        case RECEIVE_POSTS:
            return Object.assign({}, state, {
                isFetching: false,
                didInvalidate: false,
                items: action.posts,
                lastUpdated: action.receivedAt
            })
        default:
            return state
    }
}

function postsBySubreddit(state = {}, action) {
    switch (action.type) {
        case RECEIVE_POSTS:
        case REQUEST_POSTS:
            let objectPost = Object.assign({}, state, {
                [action.subreddit]: posts(state[action.subreddit], action)
            })

            console.log('objectPost =', objectPost)

            return objectPost;
        default:
            return state
    }
}

// 传递过来 type: ADD_TODO和text 然后调用 visibilityFilter和todos 两个方法
const rootReducer = combineReducers({
    postsBySubreddit
})

export default rootReducer

configureStore.js

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import rootReducer from './reducers'

const loggerMiddleware = createLogger()

export default function configureStore(preloadedState) {
    return createStore(
        rootReducer,
        preloadedState,
        applyMiddleware(
            thunkMiddleware,
            loggerMiddleware
        )
    )
}

Posts.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class Posts extends Component {
    render() {

        console.log('this.props.posts =', this.props.posts)
        return (
            <ul>
                {this.props.posts.map((post, i) => <li key={i}>{post.title}</li>)}
            </ul>
        )
    }
}

Posts.propTypes = {
    posts: PropTypes.array.isRequired
}

Answer 1

reducers.js 处理后的数据无法返回