使用redux做TODOLIST

世间万物皆对象

发布于 2024-03-20 19:48:16

12900

代码可运行

文章被收录于专栏：start

运行总次数：0

代码可运行

store.js

import { createStore, combineReducers } from 'redux';
import { reducer as todoReducer } from '../view/todolist/_index.js';
const reducer = combineReducers({
  todo: todoReducer,
})
export default createStore(reducer);

todolist/redux/reducer.js

import * as todoTypes from './todoType';
const reducer = (State = [], todo) => {
  const { type, data } = todo;
 switch (type) {
    case todoTypes.ADDList:
      const result = [
        data,
        ...State
      ]
      console.log(result)
      return result
    case todoTypes.DELLIST:
      State.splice(data, 1)
      return [...State]
    default:
      return State
  }
}
export default reducer

todolist/redux/todolist.js

import * as todoType from './todoType.js';
export const addList = (data) => ({ type: todoType.ADDList, data })
export const delList = (data) => ({ type: todoType.DELLIST, data })

todolist/redux/todoType.js

export const ADDList = "ADDLIST";
export const DELLIST = "DELLIST";

todolist/_index.js

export const ADDList = "ADDLIST";
export const DELLIST = "DELLIST";

todolist.jsx

import React, { useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import * as actions from './redux/todolist'
import './todolist.css'
const View = () => {
  let ipt = useRef();
  const state = useSelector((state) => state)
  const dispath = useDispatch()
  //数据渲染
  const list = () => {
    return state.todo.map((value, index) => (
      <li key={index}>
        {index + 1}、{value}
        <button onClick={() => { delLists(index) }}>删除</button>
      </li>
    ))
  }
  //添加
  const addFn = () => {
    let val = ipt.current.value;
    dispath(actions.addList(val))
    ipt.current.value = ""
  }
  //删除
  const delLists = (index) => {
    dispath(actions.delList(index))
  }
  //回车添加
  const handleKeyUp = (e) => {
    let val = ipt.current.value;
    if (e.keyCode === 13) {
      dispath(actions.addList(val))
      ipt.current.value = ""
    }
  }
  return (
    <div className="todoBox">
      <h2>TODOLIST</h2>
      <input onKeyUp={handleKeyUp} ref={ipt} type="text" />
      <button onClick={addFn} >添加</button>
      {list()}
    </div>
  )
}
export default View;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

redux