Redux ---简单实现一个todolist (1)

目录

/redux -/store(index.js和reducer.js) -TodoList.js

1

首先完成没有任何功能的UI页面

TodoList

import React from 'react'
import {
   Input, Button,List } from 'antd';
import store from './store';   //引入

export default class TodoList extends React.Component {
   
    constructor(props){
   
        super(props);
		//console.log(store.getState()); //结果在图1
        this.state = store.getState(); //这是获取stroe数据的方法，默认的
    }
    render(){
   
        return(
            <div style={
   {
   margin:30}}>
                <div> 
                    <Input 
                        placeholder={
   this.state.inputValue}  //1
                        size='big'
                        style={
   {
   width:250,marginRight:10}}
                    />
                    <Button type='primary'>添加</Button>
                </div>
                <div style={
   {
   marginTop:10,width:300}}>
                    <List 
                        bordered
                        dataSource={
   this.state.list}   //2                                                                                        
                        renderItem={
   item=>(<List.Item>{
   item.text}</List.Item>)}
                    />
                </div>
            </div>
        )
    }
}

图1 ：store.getState()的值

reducer.js

const defaultState = {
    //数据
    inputValue : 'inputSomething',
    list:[
        {
   id:1,text:'亲爱的索菲利亚'},
        {
   id:2,text:'这条龙如此的美丽'},
        {
   id:3,text:'是我特意前来献给你的'},
        {
   id:4,text:'希望你能喜欢我的礼物'},
    ]
}
export default (state = defaultState,action)=>{
    //导出才可以引用
    return state
}

index.js<