Redux ---简单实现一个todolist（2）

目的

进行优化处理，将可以集中管理以及冗杂的代码合并

1. 将所有的action的type移动到actionTypes
2. 把所欲的action的请求移动到actionCreator
3. 拆分组件，编写无状态组件

目录

在原来的基础上，/store新添加两个文件actionTypes 和actionCreator, /redux添加 TodoListUI

代码

actionTypes

export const CHANGE_INPUT = 'changeInput';
export const ADD_ITEM = 'addItem';
export const DELETE_ITEM = 'deleteItem';

actionCreator

import { CHANGE_INPUT, ADD_ITEM, DELETE_ITEM } from './actionTypes';

/**输入值 */
export const onChangeValueAction = (value) => ({
    type:CHANGE_INPUT,
    value
})
/**添加项目 */
export const onAddItemAction = () => ({
    type:ADD_ITEM
})

/**删除项目 */
export const onDeleteItemAction = (selectId) => ({
    type:DELETE_ITEM,
    selectId
})

reducer.js

import {CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from './actionTypes' //
const defaultState = {
    inputValue : 'inputSomething',
    list:[
        {id:1,text:'亲爱的索菲利亚'},
        {id:2,text:'这条龙如此的美丽'},
        {id:3,text:'是我特意前来献给你的'},
        {id:4,text:'希望你能喜欢我的礼物'},
    ]
}
export default (state = defaultState,action)=>{
    if(action.type === CHANGE_INPUT ){ //
        let newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState;
    }
    if(action.type === ADD_ITEM ){ //
        let newState = JSON.parse(JSON.stringify(state));
        let iid = newState.list[newState.list.length-1].id+1;
        console.log(iid);
        newState.list.push({id:iid,text:newState.inputValue});
        return newState
    }
    if(action.type === DELETE_ITEM ){ //
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.selectId,1)
        for(let i=action.selectId+1;i<=newState.length;i++){
            newState.list[i].id = i-1;
        }
        return newState
    }
    return state
}

TodoListUI.js

import React from 'react'
import {Input, Button,List } from 'antd';

const TodoListUI = (props) => {
    return(
        <div style={{margin:30}}>
            <div> 
                <Input 
                    placeholder={props.inputValue}
                    size='big'
                    style={{width:250,marginRight:10}}
                    onChange={props.onChangeValue}
                />
                <Button 
                    type='primary' 
                    onClick={props.onAddItem}
                >添加</Button>
            </div>
            <div style={{marginTop:10,width:300}}>
                <List 
                    bordered
                    dataSource={props.list}
                    renderItem={item=>(
                    <List.Item 
                        key={item.id} 
                        onClick={()=>{props.onDeleteItem(item.id)}}
                    >
                    {item.text}
                    </List.Item>)}
                />
            </div>
        </div>
    )
};
export default TodoListUI;

TodoList.js

import React from 'react'
import {onChangeValueAction, onAddItemAction, onDeleteItemAction } from './store/actionCreator'
import store from './store';
import TodoListUI from './TodoListUI';

export default class TodoList extends React.Component {
    constructor(props){
        super(props);
        this.state = store.getState();
        store.subscribe(this.stateChange)
    }
    stateChange = () =>{
        this.setState(
            store.getState()
        )
    }
    render(){
        return(
            <TodoListUI 
                inputValue = {this.state.inputValue}
                list = {this.state.list}
                onChangeValue = {this.onChangeValue}
                onAddItem = {this.onAddItem}
                onDeleteItem = {this.onDeleteItem}
            />
        )
    }
    onChangeValue=(e)=>{
        //console.log(e.target.value);
        const action = onChangeValueAction(e.target.value);
        store.dispatch(action)
    }
    onAddItem = () => {
        const action = onAddItemAction();
        store.dispatch(action)
    }
    onDeleteItem = (selectId) => {
        const action = onDeleteItemAction(selectId);
        store.dispatch(action)
    }
}

index.js不变

import reducer from './reducer'

import {createStore} from 'redux'
const store = createStore(reducer);
export default store;

藏之介白石❀