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

r囧r小猫 2023-08-17 15:46 82阅读 0赞

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