如何使用Redux的核心store数据仓库(二)

简单的一个数据添加，删除，修改（未做）

1.主键redux.js

import React, { Component } from 'react';
import { Button, Card, Input, Avatar, Skeleton, List, Icon, Modal } from 'antd';
import store from './store/index';
import 'antd/dist/antd.css';

class Redux extends Component {
    constructor(porps) {
        super(porps)
        // console.log(store.getState())       // 拿到数据仓库所暴露的store方法来获取公用数据
        this.state = store.getState()   //store.getState()就代替了曾经的对象只是放在公用仓库放着
        store.subscribe(this.storeChange) //订阅Redux的状态(Input控件数据改变时，数据仓库以改变，没返回给页面展示，用这方法实现)
    }
    // (Input控件数据改变时，数据仓库以改变，没返回给页面展示，用这方法storeChange实现)
    storeChange = () => {
        this.setState(store.getState())
        // console.log(store.getState())
    }
    // 输入Input窗口内容时改变数据仓库里的数据
    handleChange = (e) => {
        console.log(e.target)
        const action = {
            type: 'input/change',     // 传参到数据仓库用type来判断是由哪传过来的
            value: e.target.value
        }
        store.dispatch(action);      // store.dispatch()方法传参到数据仓库
    }
    // 添加
    handleAdd = (e) => {
        // console.log(this.state.inputVal)
        const action = {
            type: 'input/add',     // 传参到数据仓库用type来判断是由哪传过来的
            value: e.target.value
        }
        store.dispatch(action);
    }
    // 删除打开弹窗
    handleDelOpen = (index) => {
        // console.log(index)
        const action = {
            type: 'handleDelOpen/del',     // 传参到数据仓库用type来判断是由哪传过来的
            value: index
        }
        store.dispatch(action);
    }
    // 取消或关闭窗口
    handleCancel = (item, index) => {
        const action = {
            type: 'handleCancel',     // 传参到数据仓库用type来判断是由哪传过来的
        }
        store.dispatch(action);
    }
    // 删除
    handleDel = () => {
        const action = {
            type: 'listData/del',     // 传参到数据仓库用type来判断是由哪传过来的
        }
        store.dispatch(action);
    }
    render() {
        // const modal = Modal.info();
        // Modal.confirm({
        //     cancelText:'取消'
        // })
        return (
            <Card>
                <Input style={{ width: '50%' }} value={this.state.inputVal} onChange={this.handleChange} />
                <Button style={{ marginLeft: 10 }} type="primary" onClick={this.handleAdd} >添加</Button>
                <List
                    // 设置每页展示多少条数据
                    pagination={{
                        onChange: page => {
                            // page当前页数为多少页
                            // console.log(page);
                        },
                        pageSize: 5,
                    }}
                    itemLayout="itemLayout"  // itemLayout将删除或编辑排放位置 左侧：vertical  右侧：itemLayout
                    dataSource={this.state.listData}       // 获取到数据仓库对应的初始化数据并展示
                    renderItem={(item, index) => (
                        <List.Item
                            actions={[
                                <a href='#111' key="list-loadmore-edit" onClick={() => this.handleDelOpen(index)}>删除</a>,
                                <a href='#111' key="list-loadmore-more" >编辑</a>]}
                        >
                            {/* 列表的骨架屏 */}
                            <Skeleton avatar={true} title={false} loading={item.loading} active>
                                <List.Item.Meta
                                    avatar={<Avatar style={{ backgroundColor: '	#6495ED' }} icon={<Icon type="sketch" />} />}
                                    title={<a href="https://ant.design">{item.title}</a>}
                                    description='return this.state.remark[index]'
                                />
                            </Skeleton>
                            {/* 弹框是否删除 */}
                            <Modal
                                title="是否删除"        // 弹窗标题
                                visible={this.state.visible}   // visible判断弹窗是否打开true或false
                                onOk={() => this.handleDel()}   // 弹窗OK键
                                onCancel={this.handleCancel}     // 弹窗X和取消
                            >
                                <span><List.Item.Meta
                                    avatar={<Avatar style={{ backgroundColor: '	#6495ED' }} icon={<Icon type="sketch" />} />}
                                /></span><span>确定删除此信息？</span>
                            </Modal>
                        </List.Item>
                    )}
                />
            </Card>)
    }
}
export default Redux;       // 导出Redux

2.store数据仓库reducer.js

//默认数据
const defaultState = {
    inputVal: '',       //Input默认初始值
    visible: false,       //弹窗
    openDel: '',   //打开时保存index对应数值，关闭或OK时清空
    //数据列表title
    listData: [
        {
            title: 'Ant Design Title 1',
        },
        {
            title: 'Ant Design Title 2',
        },
        {
            title: 'Ant Design Title 3',
        },
        {
            title: 'Ant Design Title 4',
        },
    ]
}
export default (state = defaultState, action) => {

    if (action.type === 'input/change') {
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputVal = action.value
        return newState
    }

    if (action.type === 'input/add') {
        // console.log(this.state.inputVal)  // input框的内容
        if (state.inputVal === '') {
            return alert('请输入有效标题！！！')
        } else {
            let newState = JSON.parse(JSON.stringify(state))
            newState.listData.push({ title: newState.inputVal })
            newState.inputVal = ''
            return newState
        }
    }
    if (action.type === 'handleDelOpen/del') {
        console.log(action.value)
        let newState = JSON.parse(JSON.stringify(state))
        newState.openDel = action.value
        newState.visible = true
        return newState
    }
    if (action.type === 'handleCancel') {
        let newState = JSON.parse(JSON.stringify(state))
        newState.openDel = ''
        newState.visible = false
        return newState
    }
    if (action.type === 'listData/del') {
        let newState = JSON.parse(JSON.stringify(state))
        newState.listData = newState.listData.filter((item, index) => index !== newState.openDel)
        newState.openDel = ''
        newState.visible = false
        return newState
    }
    return state
}

3.store数据仓库下index.js暴露的方法

import { createStore } from 'redux'  // 引入createStore方法
import reducer from './reducer'    // 引入新建的文件reducer.js
const store = createStore(reducer)          // 创建数据存储仓库,用createStore(reducer)把import reducer from './reducer'引入
export default store                 //暴露出去

4.index.js注*这不是数据仓库之下的index

import React from 'react';
import ReactDOM from 'react-dom';
import Redux from './redux';
ReactDOM.render(<Redux />,document.getElementById('root')); // <APP />必须大写首字母才能判断出它是