<center>使用antd+redux重写Todo</center>

最新推荐文章于 2025-02-20 17:56:31 发布

转载最新推荐文章于 2025-02-20 17:56:31 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/60534758a62b

react 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍如何使用React、Ant Design和Redux构建一个待办事项应用程序。从项目结构搭建、组件创建、状态管理到功能实现，包括输入框、按钮、列表组件及数据更新流程。

1.在src目录下新建一个index.js文件
文件内容如下：
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

ReactDOM.render(<TodoList/>, document.getElementById('root'));

2..在src目录下新建一个Todolist.js文件是index.js的组件
3.安装antd依赖 $ npm install antd --save $ yarn add antd
4.引入antd包和需要的组件
import React , { Component } from 'react';
import 'antd/dist/antd.css';
import { Input,Button,List } from 'antd';
import store from './store';

class TodoList extends Component{

    render() {
       return (
             <div style={{marginTop : 80, marginLeft : 500}}>
              <div>
                   <Input placeholder="Todo info"  style={{width : 300,marginRight : 10}}
               
                   />
                   <Button type="primary" >提交</Button>
              </div>
              <List
                    style={{marginTop : 10 , width : 300}}
                    size="small"

                    bordered
                    dataSource={this.state.List}
                    renderItem={(item,index) => (<List.Item >{item}</List.Item>)}
              />
        )
    } 
}

export default TodoList;

5.在src目录下建立store文件夹
6.在store文件夹下建立index.js文件
7.安装redux包 yarn add  redux
8.在store文件夹下的index中引入redux 代码如下:
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer, 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

export default store;

9.建立了store数据仓库需要reducer文件来操作数据
10.在store文件夹下建立一个reducer.js文件 代码如下：
const defaultState = {
    inputValue : "123",
    List : []
}
export default (state = defaultState,action) => {
    return state;
}

11.在TodoList.js文件下引入store文件夹下的index.js文件
import store from './store';
12.在TodoList.js文件中取得store中的数据
this.state = store.getState();
13.把store中的数据添加到input的value值上并且改变store中的数据，并添加上一个onChange的方法
<Input placeholder="Todo info" value={this.state.inputValue} style={{width : 300,marginRight : 10}} 
 onChange = {this.handelInputChange}
14.在handelInputChange方法中发送action到reducer中来改变input的value值
    handelInputChange (e) {
        const action= {
            type : 'Change_input_value',
            value : e.target.value
        }
        store.dispatch(action);
    }

15.reducer.js文件接收Component发过来的action来处理数据
const defaultState = {
    inputValue : "123",
    List : []
}
export default (state = defaultState,action) => {
//注意：reducer可以接收state 但绝对不能修改state只能深拷贝出来
    if(action.type==="Change_input_value"){
        //拷贝state
        const newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState;
    }
    return state;
}

16.当reducer中的条件成立返回一个新的state给store
17.此时store需要把新的数据给到Component需要用到一个方法
store.subscribe();用这个方法来订阅store中的数据，如果store中的数据发送改变将自动执行这个函数
18.把store.subscribe();方法添加到TodoList.js的 constructor中并为其添加一个函数
 constructor(props) {
  super(props);
store.subscribe(this.handleStoreChange);
}
19.函数内容如下：
    handleStoreChange() {
        this.setState(store.getState());
    }
20.只要store中的数据发生改动，就会调用上面方法来重新渲染DOM