44_redux_comment应用_redux版本_同步功能

项目结构：

components里面的东西没变，将app.jsx移动至containers中

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

action-types.js

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

actions.js

/*
* 包含n个reducer函数(根据老的state和action返回一个新的state)
* */

import {ADD_COMMENT, DELETE_COMMENT} from './action-types'

const initComments = [
    {username: 'Tom', content: 'React挺好的！'},
    {username: 'Jack', content: 'React太难了！'},
    {username: 'Jensen', content: '干就完了！'}
]

export 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)
        default:
            return state
    }
}

reducers.jsx

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

export default createStore(
    comments,
    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} from '../../redux/actions'

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

    componentDidMount() {

    }


    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}),// 说明state就是comments数组
    {addComment, deleteComment}
)(App)

app.jsx

 

转载于:https://www.cnblogs.com/zhanzhuang/p/10758865.html