技術標籤：React學習reactjs

目的

進行優化處理，將可以集中管理以及冗雜的程式碼合併

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;

通靈之戰真好看，絕了