45_redux_comment应用_redux版本_异步功能

/*
* 包含所有action的type名称常量
* */
//添加评论
export const ADD_COMMENT = 'add_comment';
//删除评论
export const DELETE_COMMENT = 'delete_comment';
//接收评论数组
export const RECEIVE_COMMENTS = 'receive_comments';

export const INCREMENT = 'increment';

action-types.js

/*
* 包含了所有的action creator(action的工厂函数)
* */
import {ADD_COMMENT, DELETE_COMMENT, RECEIVE_COMMENTS} from './action-types'
// 同步添加
export const addComment = (comment) => (
    {type: ADD_COMMENT, data: comment}
)
// 同步删除
export const deleteComment = (index) => (
    {type: DELETE_COMMENT, data: index}
)
// 同步接收comments
const receiveComments = (comments) => ({
    type: RECEIVE_COMMENTS,
    data: comments
})

// 异步从后台获取数据
export const getComments = () => {
    return dispatch => {
        // 模拟发送ajax请求异步获取数据
        setTimeout(() => {
            const comments = [
                {username: 'Tom', content: 'React挺好的！'},
                {username: 'Jack', content: 'React太难了！'},
                {username: 'Jensen', content: '干就完了！'}
            ]
            //分发一个同步的action
            dispatch(receiveComments(comments))
        }, 1000)
    }
}

actions.js

/*
* 包含n个reducer函数(根据老的state和action返回一个新的state)
* */
import {combineReducers} from 'redux'
import {ADD_COMMENT, DELETE_COMMENT, RECEIVE_COMMENTS, INCREMENT} from './action-types'

function counter(state = 0, action) {
    console.log('counter()', state, action)
    switch (action.type) {
        case INCREMENT:
            return state + action.data
        case DELETE_COMMENT:
            return state - action.data
        default:
            return state
    }
}

const initComments = []

function comments(state = initComments, action) {
    switch (action.type) {
        case ADD_COMMENT:
            return [action.data, ...state]
        case DELETE_COMMENT:
            return state.filter((comment, index) => index !== action.data)
        case RECEIVE_COMMENTS:
            return action.data
        default:
            return state
    }
}

export default combineReducers({
    counter, //指定reducer对应的属性
    comments
})
// redux向外暴露的state是什么结构？
// 是一个对象{counter:2,comments:[]}

reducers.jsx

/*
* redux最核心的管理对象store
* */
import {createStore, applyMiddleware} from 'redux'
import reducers from './reducers'
import thunk from 'redux-thunk'

export default createStore(
    reducers,
    applyMiddleware(thunk)
)

store.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'

import store from './redux/store'
import App from './containers/app/app'

ReactDOM.render((
    <Provider store={store}>
        <App/>
    </Provider>
), document.getElementById('root'));

index.js

import React from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'

import CommentAdd from '../../components/comment-add/comment-add'
import CommentList from '../../components/comment-list/comment-list';
import {addComment, deleteComment, getComments} from '../../redux/actions'

class App extends React.Component {
    //定义数据
    static propTypes = {
        comments: PropTypes.array.isRequired,
        addComment: PropTypes.func.isRequired,
        deleteComment: PropTypes.func.isRequired,
        getComments: PropTypes.func.isRequired
    }

    componentDidMount() {
        //异步获取所有评论数组
        this.props.getComments()
    }

    render() {
        const {comments, addComment, deleteComment} = this.props
        return (
            <div>
                <header className="site-header jumbotron">
                    <div className="container">
                        <div className="row">
                            <div className="col-xs-12">
                                <h1>请发表对React的评论</h1>
                            </div>
                        </div>
                    </div>
                </header>
                <div className="container">
                    <CommentAdd addComment={addComment}/>
                    <CommentList comments={comments} deleteComment={deleteComment}/>
                </div>
            </div>

        )
    }
}

export default connect(
    state => ({comments: state.comments}),// 说明state就是comments数组
    {addComment, deleteComment, getComments}
)(App)

app.jsx